zlty-h5/components/uni-tag/uni-tag.vue

<template>
	<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
</template>

<script>
	/**
	 * Tag 标签
	 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
	 * @property {String} text 标签内容
	 * @property {String} size = [default|small|mini] 大小尺寸
	 * 	@value default 正常
	 * 	@value small 小尺寸
	 * 	@value mini 迷你尺寸
	 * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
	 * 	@value default 灰色
	 * 	@value primary 蓝色
	 * 	@value success 绿色
	 * 	@value warning 黄色
	 * 	@value error 红色
	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
	 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
	 * @property {Boolean} circle = [true|false] 是否为圆角
	 * @event {Function} click 点击 Tag 触发事件
	 */

	export default {
		name: "UniTag",
		emits: ['click'],
		props: {
			type: {
				// 标签类型default、primary、success、warning、error、royal
				type: String,
				default: "default"
			},
			size: {
				// 标签大小 normal, small
				type: String,
				default: "normal"
			},
			// 标签内容
			text: {
				type: String,
				default: ""
			},
			disabled: {
				// 是否为禁用状态
				type: [Boolean, String],
				default: false
			},
			inverted: {
				// 是否为空心
				type: [Boolean, String],
				default: false
			},
			circle: {
				// 是否为圆角样式
				type: [Boolean, String],
				default: false
			},
			mark: {
				// 是否为标记样式
				type: [Boolean, String],
				default: false
			},
			customStyle: {
				type: String,
				default: ''
			}
		},
		computed: {
			classes() {
				const {
					type,
					disabled,
					inverted,
					circle,
					mark,
					size,
					isTrue
				} = this
				const classArr = [
					'uni-tag--' + type,
					'uni-tag--' + size,
					isTrue(disabled) ? 'uni-tag--disabled' : '',
					isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
					isTrue(circle) ? 'uni-tag--circle' : '',
					isTrue(mark) ? 'uni-tag--mark' : '',
					// type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
					isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
					size === 'small' ? 'uni-tag-text--small' : ''
				]
				// 返回类的字符串，兼容字节小程序
				return classArr.join(' ')
			}
		},
		methods: {
			isTrue(value) {
				return value === true || value === 'true'
			},
			onClick() {
				if (this.isTrue(this.disabled)) return
				this.$emit("click");
			}
		}
	};
</script>

<style lang="scss" scoped>
	$uni-primary: #2979ff !default;
	$uni-success: #18bc37 !default;
	$uni-warning: #f3a73f !default;
	$uni-error: #e43d33 !default;
	$uni-info: #8f939c !default;


	$tag-default-pd: 4px 7px;
	$tag-small-pd: 2px 5px;
	$tag-mini-pd: 1px 3px;

	.uni-tag {
		line-height: 14px;
		font-size: 12px;
		font-weight: 200;
		padding: $tag-default-pd;
		color: #fff;
		border-radius: 3px;
		background-color: $uni-info;
		border-width: 1rpx;
		border-style: solid;
		border-color: $uni-info;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */

		// size attr
		&--default {
			font-size: 12px;
		}

		&--default--inverted {
			color: $uni-info;
			border-color: $uni-info;
		}

		&--small {
			padding: $tag-small-pd;
			font-size: 12px;
			border-radius: 2px;
		}

		&--mini {
			padding: $tag-mini-pd;
			font-size: 12px;
			border-radius: 2px;
		}

		// type attr
		&--primary {
			background-color: $uni-primary;
			border-color: $uni-primary;
			color: #fff;
		}

		&--success {
			color: #fff;
			background-color: $uni-success;
			border-color: $uni-success;
		}

		&--warning {
			color: #fff;
			background-color: $uni-warning;
			border-color: $uni-warning;
		}

		&--error {
			color: #fff;
			background-color: $uni-error;
			border-color: $uni-error;
		}

		&--primary--inverted {
			color: $uni-primary;
			border-color: $uni-primary;
		}

		&--success--inverted {
			color: $uni-success;
			border-color: $uni-success;
		}

		&--warning--inverted {
			color: $uni-warning;
			border-color: $uni-warning;
		}

		&--error--inverted {
			color: $uni-error;
			border-color: $uni-error;
		}

		&--inverted {
			background-color: #fff;
		}

		// other attr
		&--circle {
			border-radius: 15px !important;
		}

		&--mark {
			border-top-left-radius: 0 !important;
			border-bottom-left-radius: 0 !important;
			border-top-right-radius: 15px !important;
			border-bottom-right-radius: 15px !important;
		}

		&--disabled {
			opacity: 0.5;
			/* #ifdef H5 */
			cursor: not-allowed;
			/* #endif */
		}
	}


	.uni-tag-text {
		color: #fff;
		font-size: 14px;

		&--primary {
			color: $uni-primary;
		}

		&--success {
			color: $uni-success;
		}

		&--warning {
			color: $uni-warning;
		}

		&--error {
			color: $uni-error;
		}

		&--small {
			font-size: 12px;
		}
	}
</style>