From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-badge/u-badge.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 171 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-badge/u-badge.vue b/uni_modules/uview-ui/components/u-badge/u-badge.vue
new file mode 100644
index 0000000..53cfc81
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-badge/u-badge.vue
@@ -0,0 +1,171 @@
+<template>
+ <text
+ v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
+ :class="[isDot ? 'u-badge--dot' : 'u-badge--not-dot', inverted && 'u-badge--inverted', shape === 'horn' && 'u-badge--horn', `u-badge--${type}${inverted ? '--inverted' : ''}`]"
+ :style="[$u.addStyle(customStyle), badgeStyle]"
+ class="u-badge"
+ >{{ isDot ? '' :showValue }}</text>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * badge 寰芥爣鏁�
+ * @description 璇ョ粍浠朵竴鑸敤浜庡浘鏍囧彸涓婅鏄剧ず鏈鐨勬秷鎭暟閲忥紝鎻愮ず鐢ㄦ埛鐐瑰嚮锛屾湁鍦嗙偣鍜屽渾鍖呭惈鏂囧瓧涓ょ褰㈠紡銆�
+ * @tutorial https://uviewui.com/components/badge.html
+ *
+ * @property {Boolean} isDot 鏄惁鏄剧ず鍦嗙偣 锛堥粯璁� false 锛�
+ * @property {String | Number} value 鏄剧ず鐨勫唴瀹�
+ * @property {Boolean} show 鏄惁鏄剧ず 锛堥粯璁� true 锛�
+ * @property {String | Number} max 鏈�澶у�硷紝瓒呰繃鏈�澶у�间細鏄剧ず '{max}+' 锛堥粯璁�999锛�
+ * @property {String} type 涓婚绫诲瀷锛宔rror|warning|success|primary 锛堥粯璁� 'error' 锛�
+ * @property {Boolean} showZero 褰撴暟鍊间负 0 鏃讹紝鏄惁灞曠ず Badge 锛堥粯璁� false 锛�
+ * @property {String} bgColor 鑳屾櫙棰滆壊锛屼紭鍏堢骇姣攖ype楂橈紝濡傝缃紝type鍙傛暟浼氬け鏁�
+ * @property {String} color 瀛椾綋棰滆壊 锛堥粯璁� '#ffffff' 锛�
+ * @property {String} shape 寰芥爣褰㈢姸锛宑ircle-鍥涜鍧囦负鍦嗚锛宧orn-宸︿笅瑙掍负鐩磋 锛堥粯璁� 'circle' 锛�
+ * @property {String} numberType 璁剧疆鏁板瓧鐨勬樉绀烘柟寮忥紝overflow|ellipsis|limit 锛堥粯璁� 'overflow' 锛�
+ * @property {Array}} offset 璁剧疆badge鐨勪綅缃亸绉伙紝鏍煎紡涓� [x, y]锛屼篃鍗宠缃殑涓簍op鍜宺ight鐨勫�硷紝absolute涓簍rue鏃舵湁鏁�
+ * @property {Boolean} inverted 鏄惁鍙嶈浆鑳屾櫙鍜屽瓧浣撻鑹诧紙榛樿 false 锛�
+ * @property {Boolean} absolute 鏄惁缁濆瀹氫綅锛堥粯璁� false 锛�
+ * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡
+ * @example <u-badge :type="type" :count="count"></u-badge>
+ */
+ export default {
+ name: 'u-badge',
+ mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
+ computed: {
+ // 鏄惁灏哹adge涓績涓庣埗缁勪欢鍙充笂瑙掗噸鍚�
+ boxStyle() {
+ let style = {};
+ return style;
+ },
+ // 鏁翠釜缁勪欢鐨勬牱寮�
+ badgeStyle() {
+ const style = {}
+ if(this.color) {
+ style.color = this.color
+ }
+ if (this.bgColor && !this.inverted) {
+ style.backgroundColor = this.bgColor
+ }
+ if (this.absolute) {
+ style.position = 'absolute'
+ // 濡傛灉鏈夎缃畂ffset鍙傛暟
+ if(this.offset.length) {
+ // top鍜宺ight鍒嗕负涓簅ffset鐨勭涓�涓拰绗簩涓�硷紝濡傛灉娌℃湁绗簩涓�硷紝鍒檙ight绛変簬top
+ const top = this.offset[0]
+ const right = this.offset[1] || top
+ style.top = uni.$u.addUnit(top)
+ style.right = uni.$u.addUnit(right)
+ }
+ }
+ return style
+ },
+ showValue() {
+ switch (this.numberType) {
+ case "overflow":
+ return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
+ break;
+ case "ellipsis":
+ return Number(this.value) > Number(this.max) ? "..." : this.value
+ break;
+ case "limit":
+ return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
+ Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value /
+ 1e3 * 100) / 100 + "k" : this.value
+ break;
+ default:
+ return Number(this.value)
+ }
+ },
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ $u-badge-primary: $u-primary !default;
+ $u-badge-error: $u-error !default;
+ $u-badge-success: $u-success !default;
+ $u-badge-info: $u-info !default;
+ $u-badge-warning: $u-warning !default;
+ $u-badge-dot-radius: 100px !default;
+ $u-badge-dot-size: 8px !default;
+ $u-badge-dot-right: 4px !default;
+ $u-badge-dot-top: 0 !default;
+ $u-badge-text-font-size: 11px !default;
+ $u-badge-text-right: 10px !default;
+ $u-badge-text-padding: 2px 5px !default;
+ $u-badge-text-align: center !default;
+ $u-badge-text-color: #FFFFFF !default;
+
+ .u-badge {
+ border-top-right-radius: $u-badge-dot-radius;
+ border-top-left-radius: $u-badge-dot-radius;
+ border-bottom-left-radius: $u-badge-dot-radius;
+ border-bottom-right-radius: $u-badge-dot-radius;
+ @include flex;
+ line-height: $u-badge-text-font-size;
+ text-align: $u-badge-text-align;
+ font-size: $u-badge-text-font-size;
+ color: $u-badge-text-color;
+
+ &--dot {
+ height: $u-badge-dot-size;
+ width: $u-badge-dot-size;
+ }
+
+ &--inverted {
+ font-size: 13px;
+ }
+
+ &--not-dot {
+ padding: $u-badge-text-padding;
+ }
+
+ &--horn {
+ border-bottom-left-radius: 0;
+ }
+
+ &--primary {
+ background-color: $u-badge-primary;
+ }
+
+ &--primary--inverted {
+ color: $u-badge-primary;
+ }
+
+ &--error {
+ background-color: $u-badge-error;
+ }
+
+ &--error--inverted {
+ color: $u-badge-error;
+ }
+
+ &--success {
+ background-color: $u-badge-success;
+ }
+
+ &--success--inverted {
+ color: $u-badge-success;
+ }
+
+ &--info {
+ background-color: $u-badge-info;
+ }
+
+ &--info--inverted {
+ color: $u-badge-info;
+ }
+
+ &--warning {
+ background-color: $u-badge-warning;
+ }
+
+ &--warning--inverted {
+ color: $u-badge-warning;
+ }
+ }
+</style>
--
Gitblit v1.9.3