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-tag/u-tag.vue |  294 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 294 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-tag/u-tag.vue b/uview-ui/components/u-tag/u-tag.vue
new file mode 100644
index 0000000..90ec3f4
--- /dev/null
+++ b/uview-ui/components/u-tag/u-tag.vue
@@ -0,0 +1,294 @@
+<template>
+	<view v-if="show" :class="[
+		disabled ? 'u-disabled' : '',
+		'u-size-' + size,
+		'u-shape-' + shape,
+		'u-mode-' + mode + '-' + type
+	]"
+	 class="u-tag" :style="[customStyle]" @tap="clickTag">
+		{{text}}
+		<view class="u-icon-wrap" @tap.stop>
+			<u-icon @click="close" size="22" v-if="closeable" :color="closeIconColor" 
+			name="close" class="u-close-icon" :style="[iconStyle]"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * tag 鎻愮ず
+	 * @description 璇ョ粍浠朵竴鑸敤浜庢爣璁板拰閫夋嫨
+	 * @tutorial https://www.uviewui.com/components/tag.html
+	 * @property {String} type 涓婚绫诲瀷锛堥粯璁rimary锛�
+	 * @property {String} size 鏍囩澶у皬锛堥粯璁efault锛�
+	 * @property {String} shape 鏍囩褰㈢姸锛堥粯璁quare锛�
+	 * @property {String} text 鏍囩鐨勬枃瀛楀唴瀹�
+	 * @property {String} bg-color 鑷畾涔夋爣绛剧殑鑳屾櫙棰滆壊
+	 * @property {String} border-color 鏍囩鐨勮竟妗嗛鑹�
+	 * @property {String} close-color 鍏抽棴鎸夐挳鐨勯鑹�
+	 * @property {String Number} index 鐐瑰嚮鏍囩鏃讹紝浼氶�氳繃click浜嬩欢杩斿洖璇ュ��
+	 * @property {String} mode 妯″紡閫夋嫨锛岃瀹樼綉璇存槑锛堥粯璁ight锛�
+	 * @property {Boolean} closeable 鏄惁鍙叧闂紝璁剧疆涓簍rue锛屾枃瀛楀彸杈逛細鍑虹幇涓�涓叧闂浘鏍囷紙榛樿false锛�
+	 * @property {Boolean} show 鏍囩鏄剧ず涓庡惁锛堥粯璁rue锛�
+	 * @event {Function} click 鐐瑰嚮鏍囩瑙﹀彂
+	 * @event {Function} close closeable涓簍rue鏃讹紝鐐瑰嚮鏍囩鍏抽棴鎸夐挳瑙﹀彂
+	 * @example <u-tag text="闆湀澶�" type="success" />
+	 */
+	export default {
+		name: 'u-tag',
+		// 鏄惁绂佺敤杩欎釜鏍囩锛岀鐢ㄧ殑璇濓紝浼氬睆钄界偣鍑讳簨浠�
+		props: {
+			// 鏍囩绫诲瀷info銆乸rimary銆乻uccess銆亀arning銆乪rror
+			type: {
+				type: String,
+				default: 'primary'
+			},
+			disabled: {
+				type: [Boolean, String],
+				default: false
+			},
+			// 鏍囩鐨勫ぇ灏忥紝鍒嗕负default锛堥粯璁わ級锛宮ini锛堣緝灏忥級
+			size: {
+				type: String,
+				default: 'default'
+			},
+			// tag鐨勫舰鐘讹紝circle锛堜袱杈瑰崐鍦嗗舰锛�, square锛堟柟褰紝甯﹀渾瑙掞級锛宑ircleLeft锛堝乏杈规槸鍗婂渾锛夛紝circleRight锛堝彸杈规槸鍗婂渾锛�
+			shape: {
+				type: String,
+				default: 'square'
+			},
+			// 鏍囩鏂囧瓧
+			text: {
+				type: [String, Number],
+				default: ''
+			},
+			// 鑳屾櫙棰滆壊锛岄粯璁や负绌哄瓧绗︿覆锛屽嵆涓嶅鐞�
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 鏍囩瀛椾綋棰滆壊锛岄粯璁や负绌哄瓧绗︿覆锛屽嵆涓嶅鐞�
+			color: {
+				type: String,
+				default: ''
+			},
+			// 闀傜┖褰㈠紡鏍囩鐨勮竟妗嗛鑹�
+			borderColor: {
+				type: String,
+				default: ''
+			},
+			// 鍏抽棴鎸夐挳鍥炬爣鐨勯鑹�
+			closeColor: {
+				type: String,
+				default: ''
+			},
+			// 鐐瑰嚮鏃惰繑鍥炵殑绱㈠紩鍊硷紝鐢ㄤ簬鍖哄垎渚嬮亶鐨勬暟缁勫摢涓厓绱犺鐐瑰嚮浜�
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 妯″紡閫夋嫨锛宒ark|light|plain
+			mode: {
+				type: String,
+				default: 'light'
+			},
+			// 鏄惁鍙叧闂�
+			closeable: {
+				type: Boolean,
+				default: false
+			},
+			// 鏄惁鏄剧ず
+			show: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		computed: {
+			customStyle() {
+				let style = {};
+				// 鏂囧瓧棰滆壊锛堝鏋滄湁姝ゅ�硷紝浼氳鐩杢ype鍊肩殑棰滆壊锛�
+				if(this.color) style.color = this.color;
+				// tag鐨勮儗鏅鑹诧紙濡傛灉鏈夋鍊硷紝浼氳鐩杢ype鍊肩殑棰滆壊锛�
+				if(this.bgColor) style.backgroundColor = this.bgColor;
+				// 濡傛灉鏄晜绌哄瀷tag锛屾病鏈変紶閫掕竟妗嗛鑹诧紙borderColor锛夌殑璇濓紝浣跨敤鏂囧瓧鐨勯鑹诧紙color灞炴�э級
+				if(this.mode == 'plain' && this.color && !this.borderColor) style.borderColor = this.color;
+				else style.borderColor = this.borderColor;
+				return style;
+			},
+			iconStyle() {
+				if(!this.closeable) return ;
+				let style = {};
+				if(this.size == 'mini') style.fontSize = '20rpx';
+				else style.fontSize = '22rpx';
+				if(this.mode == 'plain' || this.mode == 'light') style.color = this.type;
+				else if(this.mode == 'dark')  style.color = "#ffffff";
+				if(this.closeColor) style.color = this.closeColor;
+				return style;
+			},
+			// 鍏抽棴鍥炬爣鐨勯鑹�
+			closeIconColor() {
+				// 濡傛灉瀹氫箟浜嗗叧闂浘鏍囩殑棰滆壊锛屽氨鐢ㄦ鍊硷紝鍚﹀垯鐢ㄥ瓧浣撻鑹茬殑鍊�
+				// 濡傛灉涓婇潰鐨勪簩鑰呴兘娌℃湁锛屽鏋滄槸dark娣辫壊妯″紡锛屽浘鏍囧氨涓虹櫧鑹�
+				// 鏈�鍚庡鏋滀笂闈㈢殑涓夎�呴兘涓嶅悎閫傦紝灏辫繑鍥瀟ype鍊肩粰鍥炬爣鑾峰彇棰滆壊
+				let color = '';
+				if(this.closeColor) return this.closeColor;
+				else if(this.color) return this.color;
+				else if(this.mode == 'dark') return '#ffffff';
+				else return this.type;
+			}
+		},
+		methods: {
+			// 鏍囩琚偣鍑�
+			clickTag() {
+				// 濡傛灉鏄痙isabled鐘舵�侊紝涓嶅彂閫佺偣鍑讳簨浠�
+				if(this.disabled) return ;
+				this.$emit('click', this.index);
+			},
+			// 鐐瑰嚮鏍囩鍏抽棴鎸夐挳
+			close() {
+				this.$emit('close', this.index);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-tag {
+		box-sizing: border-box;
+		align-items: center;
+		border-radius: 6rpx;
+		/* #ifndef APP-NVUE */
+		display: inline-block;
+		/* #endif */
+		line-height: 1;
+	}
+	
+	.u-size-default {
+		font-size: 22rpx;
+		padding: 12rpx 22rpx;
+	}
+	
+	.u-size-mini {
+		font-size: 20rpx;
+		padding: 6rpx 12rpx;
+	}
+
+	.u-mode-light-primary {
+		background-color: $u-type-primary-light;
+		color: $u-type-primary;
+		border: 1px solid $u-type-primary-disabled;
+	}
+	
+	.u-mode-light-success {
+		background-color: $u-type-success-light;
+		color: $u-type-success;
+		border: 1px solid $u-type-success-disabled;
+	}
+	
+	.u-mode-light-error {
+		background-color: $u-type-error-light;
+		color: $u-type-error;
+		border: 1px solid $u-type-error-disabled;
+	}
+	
+	.u-mode-light-warning {
+		background-color: $u-type-warning-light;
+		color: $u-type-warning;
+		border: 1px solid $u-type-warning-disabled;
+	}
+	
+	.u-mode-light-info {
+		background-color: $u-type-info-light;
+		color: $u-type-info;
+		border: 1px solid $u-type-info-disabled;
+	}
+	
+	.u-mode-dark-primary {
+		background-color: $u-type-primary;
+		color: #FFFFFF;
+	}
+	
+	.u-mode-dark-success {
+		background-color: $u-type-success;
+		color: #FFFFFF;
+	}
+	
+	.u-mode-dark-error {
+		background-color: $u-type-error;
+		color: #FFFFFF;
+	}
+	
+	.u-mode-dark-warning {
+		background-color: $u-type-warning;
+		color: #FFFFFF;
+	}
+	
+	.u-mode-dark-info {
+		background-color: $u-type-info;
+		color: #FFFFFF;
+	}
+	
+	.u-mode-plain-primary {
+		background-color: #FFFFFF;
+		color: $u-type-primary;
+		border: 1px solid $u-type-primary;
+	}
+	
+	.u-mode-plain-success {
+		background-color: #FFFFFF;
+		color: $u-type-success;
+		border: 1px solid $u-type-success;
+	}
+	
+	.u-mode-plain-error {
+		background-color: #FFFFFF;
+		color: $u-type-error;
+		border: 1px solid $u-type-error;
+	}
+	
+	.u-mode-plain-warning {
+		background-color: #FFFFFF;
+		color: $u-type-warning;
+		border: 1px solid $u-type-warning;
+	}
+	
+	.u-mode-plain-info {
+		background-color: #FFFFFF;
+		color: $u-type-info;
+		border: 1px solid $u-type-info;
+	}
+	
+	.u-disabled {
+		opacity: 0.55;
+	}
+
+	.u-shape-circle {
+		border-radius: 100rpx;
+	}
+	
+	.u-shape-circleRight {
+		border-radius:  0 100rpx 100rpx 0;
+	}
+
+	.u-shape-circleLeft {
+		border-radius: 100rpx 0 0 100rpx;
+	}
+	
+	.u-close-icon {
+		margin-left: 14rpx;
+		font-size: 22rpx;
+		color: $u-type-success;
+	}
+	
+	.u-icon-wrap {
+		display: inline-flex;
+		transform: scale(0.86);
+	}
+</style>

--
Gitblit v1.9.3