现有的iView官网的标签没有监听是否选中的属性，所有需要新加组件
首先到iView的官方地址找到Tag的源码，拷贝过来进行修改
源码地址：https://github.com/iview/iview 在组件目录下找到Tag的，拷贝相关的导入文件到现有的项目中
1、在当前项目的组件目录创建tagg目录，拷贝源码的utils目录下的assist.js文件到tagg文件中
然后拷贝源码icon目录中的文件到当前项目的componets文件中
2、拷贝tag标签的源码，并进行修改
1 <template> 2 <transition name="fade" v-if="fade"> 3 <div :class="classes" @click.stop="check" :style="wraperStyles"> 4 <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span> 5 <span :class="textClasses" :style="textColorStyle"><slot></slot></span> 6 <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon> 7 </div> 8 </transition> 9 <div v-else :class="classes" @click.stop="check" :style="wraperStyles"> 10 <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span> 11 <span :class="textClasses" :style="textColorStyle"><slot></slot></span> 12 <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon> 13 </div> 14 </template> 15 <script> 16 import Icon from '../icon'; 17 import { oneOf } from './assist'; 18 const prefixCls = 'ivu-tag'; 19 const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple']; 20 const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple']; 21 22 export default { 23 name: 'Tagg', 24 components: { Icon }, 25 props: { 26 closable: { 27 type: Boolean, 28 default: false 29 }, 30 checkable: { 31 type: Boolean, 32 default: false 33 }, 34 checked: { 35 type: Boolean, 36 default: true 37 }, 38 color: { 39 type: String, 40 default: 'default' 41 }, 42 type: { 43 validator (value) { 44 return oneOf(value, ['border', 'dot']); 45 } 46 }, 47 name: { 48 type: [String, Number] 49 }, 50 fade: { 51 type: Boolean, 52 default: true 53 } 54 }, 55 data () { 56 return { 57 isChecked: this.checked 58 }; 59 }, 60 watch:{ 61 checked:{ 62 handler:function(newValue,old){ 63 console.log(this.name); 64 console.log(newValue); 65 this.checked = newValue; 66 this.isChecked = this.checked; 67 }, 68 deep:true 69 } 70 }, 71 computed: { 72 classes () { 73 return [ 74 `${prefixCls}`, 75 { 76 [`${prefixCls}-${this.color}`]: !!this.color && oneOf(this.color, initColorList), 77 [`${prefixCls}-${this.type}`]: !!this.type, 78 [`${prefixCls}-closable`]: this.closable, 79 [`${prefixCls}-checked`]: this.isChecked 80 } 81 ]; 82 }, 83 wraperStyles () { 84 return oneOf(this.color, initColorList) ? {} : {background: this.isChecked ? this.defaultTypeColor : 'transparent', borderWidth: '1px', borderStyle: 'solid', borderColor: ((this.type !== 'dot' && this.type !== 'border' && this.isChecked) ? this.borderColor : this.lineColor), color: this.lineColor}; 85 }, 86 textClasses () { 87 return [ 88 `${prefixCls}-text`, 89 this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '', 90 (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked && colorList.indexOf(this.color) < 0 ? `${prefixCls}-color-white` : '') : '' 91 ]; 92 }, 93 dotClasses () { 94 return `${prefixCls}-dot-inner`; 95 }, 96 iconClass () { 97 if (this.type === 'dot') { 98 return ''; 99 } else if (this.type === 'border') { 100 return oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : ''; 101 } else { 102 return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''; 103 } 104 }, 105 showDot () { 106 return !!this.type && this.type === 'dot'; 107 }, 108 lineColor () { 109 if (this.type === 'dot') { 110 return ''; 111 } else if (this.type === 'border') { 112 return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : ''; 113 } else { 114 return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''; 115 } 116 }, 117 borderColor () { 118 return this.color !== undefined ? (this.color === 'default' ? '' : this.color) : ''; 119 }, 120 dotColor () { 121 return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : ''; 122 }, 123 textColorStyle () { 124 return oneOf(this.color, initColorList) ? {} : ((this.type !== 'dot' && this.type !== 'border') ? (this.isChecked ? {color: this.lineColor} : {}) : {color: this.lineColor}); 125 }, 126 bgColorStyle () { 127 return oneOf(this.color, initColorList) ? {} : {background: this.dotColor}; 128 }, 129 defaultTypeColor () { 130 return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '') : ''; 131 } 132 }, 133 methods: { 134 close (event) { 135 if (this.name === undefined) { 136 this.$emit('on-close', event); 137 } else { 138 this.$emit('on-close', event, this.name); 139 } 140 }, 141 check () { 142 if (!this.checkable) return; 143 const checked = !this.isChecked; 144 this.isChecked = checked; 145 if (this.name === undefined) { 146 this.$emit('on-change', checked); 147 } else { 148 this.$emit('on-change', checked, this.name); 149 } 150 }, 151 test(param){ 152 console.log(param); 153 } 154 } 155 }; 156 </script>