fuint-uniapp-master/uview-ui/components/u-tag/u-tag.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<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 主题类型（默认primary）
	 * @property {String} size 标签大小（默认default）
	 * @property {String} shape 标签形状（默认square）
	 * @property {String} text 标签的文字内容
	 * @property {String} bg-color 自定义标签的背景颜色
	 * @property {String} border-color 标签的边框颜色
	 * @property {String} close-color 关闭按钮的颜色
	 * @property {String Number} index 点击标签时，会通过click事件返回该值
	 * @property {String} mode 模式选择，见官网说明（默认light）
	 * @property {Boolean} closeable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认false）
	 * @property {Boolean} show 标签显示与否（默认true）
	 * @event {Function} click 点击标签触发
	 * @event {Function} close closeable为true时，点击标签关闭按钮触发
	 * @example <u-tag text="雪月夜" type="success" />
	 */
	export default {
		name: 'u-tag',
		// 是否禁用这个标签，禁用的话，会屏蔽点击事件
		props: {
			// 标签类型info、primary、success、warning、error
			type: {
				type: String,
				default: 'primary'
			},
			disabled: {
				type: [Boolean, String],
				default: false
			},
			// 标签的大小，分为default（默认），mini（较小）
			size: {
				type: String,
				default: 'default'
			},
			// tag的形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边是半圆），circleRight（右边是半圆）
			shape: {
				type: String,
				default: 'square'
			},
			// 标签文字