From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-badge/u-badge.vue | 217 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 217 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-badge/u-badge.vue b/uview-ui/components/u-badge/u-badge.vue
new file mode 100644
index 0000000..24c1164
--- /dev/null
+++ b/uview-ui/components/u-badge/u-badge.vue
@@ -0,0 +1,217 @@
+<template>
+ <view v-if="show" class="u-badge" :class="[
+ isDot ? 'u-badge-dot' : '',
+ size == 'mini' ? 'u-badge-mini' : '',
+ type ? 'u-badge--bg--' + type : ''
+ ]" :style="[{
+ top: offset[0] + 'rpx',
+ right: offset[1] + 'rpx',
+ fontSize: fontSize + 'rpx',
+ position: absolute ? 'absolute' : 'static',
+ color: color,
+ backgroundColor: bgColor
+ }, boxStyle]"
+ >
+ {{showText}}
+ </view>
+</template>
+
+<script>
+ /**
+ * badge 瑙掓爣
+ * @description 鏈粍浠朵竴鑸敤浜庡睍绀哄ご鍍忕殑鍦版柟锛屽涓汉涓績锛屾垨鑰呰瘎璁哄垪琛ㄩ〉鐨勭敤鎴峰ご鍍忓睍绀虹瓑鍦烘墍銆�
+ * @tutorial https://www.uviewui.com/components/badge.html
+ * @property {String Number} count 灞曠ず鐨勬暟瀛楋紝澶т簬 overflowCount 鏃舵樉绀轰负 ${overflowCount}+锛屼负0涓攕how-zero涓篺alse鏃堕殣钘�
+ * @property {Boolean} is-dot 涓嶅睍绀烘暟瀛楋紝鍙湁涓�涓皬鐐癸紙榛樿false锛�
+ * @property {Boolean} absolute 缁勪欢鏄惁缁濆瀹氫綅锛屼负true鏃讹紝offset鍙傛暟鎵嶆湁鏁堬紙榛樿true锛�
+ * @property {String Number} overflow-count 灞曠ず灏侀《鐨勬暟瀛楀�硷紙榛樿99锛�
+ * @property {String} type 浣跨敤棰勮鐨勮儗鏅鑹诧紙榛樿error锛�
+ * @property {Boolean} show-zero 褰撴暟鍊间负 0 鏃讹紝鏄惁灞曠ず Badge锛堥粯璁alse锛�
+ * @property {String} size Badge鐨勫昂瀵革紝璁句负mini浼氬緱鍒板皬涓�鍙风殑Badge锛堥粯璁efault锛�
+ * @property {Array} offset 璁剧疆badge鐨勪綅缃亸绉伙紝鏍煎紡涓� [x, y]锛屼篃鍗宠缃殑涓簍op鍜宺ight鐨勫�硷紝鍗曚綅rpx銆俛bsolute涓簍rue鏃舵湁鏁堬紙榛樿[20, 20]锛�
+ * @property {String} color 瀛椾綋棰滆壊锛堥粯璁�#ffffff锛�
+ * @property {String} bgColor 鑳屾櫙棰滆壊锛屼紭鍏堢骇姣攖ype楂橈紝濡傝缃紝type鍙傛暟浼氬け鏁�
+ * @property {Boolean} is-center 缁勪欢涓績鐐规槸鍚﹀拰鐖剁粍浠跺彸涓婅閲嶅悎锛屼紭鍏堢骇姣攐ffset楂橈紝濡傝缃紝offset鍙傛暟浼氬け鏁堬紙榛樿false锛�
+ * @example <u-badge type="error" count="7"></u-badge>
+ */
+ export default {
+ name: 'u-badge',
+ props: {
+ // primary,warning,success,error,info
+ type: {
+ type: String,
+ default: 'error'
+ },
+ // default, mini
+ size: {
+ type: String,
+ default: 'default'
+ },
+ //鏄惁鏄渾鐐�
+ isDot: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄剧ず鐨勬暟鍊煎唴瀹�
+ count: {
+ type: [Number, String],
+ },
+ // 灞曠ず灏侀《鐨勬暟瀛楀��
+ overflowCount: {
+ type: Number,
+ default: 99
+ },
+ // 褰撴暟鍊间负 0 鏃讹紝鏄惁灞曠ず Badge
+ showZero: {
+ type: Boolean,
+ default: false
+ },
+ // 浣嶇疆鍋忕Щ
+ offset: {
+ type: Array,
+ default: () => {
+ return [20, 20]
+ }
+ },
+ // 鏄惁寮�鍚粷瀵瑰畾浣嶏紝寮�鍚簡offset鎵嶄細璧蜂綔鐢�
+ absolute: {
+ type: Boolean,
+ default: true
+ },
+ // 瀛椾綋澶у皬
+ fontSize: {
+ type: [String, Number],
+ default: '24'
+ },
+ // 瀛椾綋婕旂ず
+ color: {
+ type: String,
+ default: '#ffffff'
+ },
+ // badge鐨勮儗鏅鑹�
+ bgColor: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁璁゜adge缁勪欢鐨勪腑蹇冪偣鍜岀埗缁勪欢鍙充笂瑙掗噸鍚堬紝閰嶇疆鐨勮瘽锛宱ffset灏嗕細澶辨晥
+ isCenter: {
+ type: Boolean,
+ default: false
+ }
+ },
+ computed: {
+ // 鏄惁灏哹adge涓績涓庣埗缁勪欢鍙充笂瑙掗噸鍚�
+ boxStyle() {
+ let style = {};
+ if(this.isCenter) {
+ style.top = 0;
+ style.right = 0;
+ // Y杞�-50%锛屾剰鍛崇潃badge鍚戜笂绉诲姩浜哹adge鑷韩楂樺害涓�鍗婏紝X杞�50%锛屾剰鍛崇潃鍚戝彸绉诲姩浜嗚嚜韬搴︿竴鍗�
+ style.transform = "translateY(-50%) translateX(50%)";
+ } else {
+ style.top = this.offset[0] + 'rpx';
+ style.right = this.offset[1] + 'rpx';
+ style.transform = "translateY(0) translateX(0)";
+ }
+ // 濡傛灉灏哄涓簃ini锛屽悗鎺ヤ笂scal()
+ if(this.size == 'mini') {
+ style.transform = style.transform + " scale(0.8)";
+ }
+ return style;
+ },
+ // isDot绫诲瀷鏃讹紝涓嶆樉绀烘枃瀛�
+ showText() {
+ if(this.isDot) return '';
+ else {
+ if(this.count > this.overflowCount) return `${this.overflowCount}+`;
+ else return this.count;
+ }
+ },
+ // 鏄惁鏄剧ず缁勪欢
+ show() {
+ // 濡傛灉count鐨勫�间负0锛屽苟涓攕howZero璁剧疆涓篺alse锛屼笉鏄剧ず缁勪欢
+ if(this.count == 0 && this.showZero == false) return false;
+ else return true;
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-badge {
+ /* #ifndef APP-NVUE */
+ display: inline-flex;
+ /* #endif */
+ justify-content: center;
+ align-items: center;
+ line-height: 24rpx;
+ height: 33rpx;
+ padding: 4rpx 10rpx;
+ border-radius: 100rpx;
+ z-index: 9;
+
+ &--bg--primary {
+ background-color: $u-type-primary;
+ }
+
+ &--bg--error {
+ background-color: $u-type-error;
+ }
+
+ &--bg--success {
+ background-color: $u-type-success;
+ }
+
+ &--bg--info {
+ background-color: $u-type-info;
+ }
+
+ &--bg--warning {
+ background-color: $u-type-warning;
+ }
+ }
+
+ .u-badge-dot {
+ height: 16rpx;
+ width: 16rpx;
+ border-radius: 100rpx;
+ line-height: 1;
+ }
+
+ .u-badge-mini {
+ transform: scale(0.8);
+ transform-origin: center center;
+ }
+
+ // .u-primary {
+ // background: $u-type-primary;
+ // color: #fff;
+ // }
+
+ // .u-error {
+ // background: $u-type-error;
+ // color: #fff;
+ // }
+
+ // .u-warning {
+ // background: $u-type-warning;
+ // color: #fff;
+ // }
+
+ // .u-success {
+ // background: $u-type-success;
+ // color: #fff;
+ // }
+
+ // .u-black {
+ // background: #585858;
+ // color: #fff;
+ // }
+
+ .u-info {
+ background-color: $u-type-info;
+ color: #fff;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3