iView tag 多个标签只能选择一个(测试)
现有的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>
添加了对父类组件的传递的数据的监听 watch中的deep应该可以不用加
3、测试代码
1 <template> 2 <Card> 3 <Tagg v-for="item in onelist" :name="item.value" 4 :key="item.value" @on-change="tagchange" :checked="item.checked" :checkable="item.checkable" color="success">{{item.key}}{{item.checked}}</Tagg> 5 <ol> 6 <li v-for="item in twolist" :key="item.value" style="list-style-type:none"> 7 <Row> 8 <Col span="2"> 9 <Tag :name="item.value" :key="item.value" :checked="item.checked" :checkable="item.checkable" 10 :color="item.color">{{item.key}} 11 </Tag> 12 </Col> 13 <Col span="22" pull="1"> 14 <Tag v-for="inner in item.child" :name="inner.value" 15 :key="inner.value" :checked="inner.checked" :checkable="inner.checkable" color="success">{{inner.key}}</Tag> 16 </Col> 17 </Row> 18 </li> 19 </ol> 20 </Card> 21 </template> 22 <script> 23 import Tagg from "_c/tagg/tagg.vue"; 24 export default { 25 data(){ 26 return { 27 onelist:[ 28 { 29 key:'电影', 30 value:'1', 31 checked:false, 32 checkable:true, 33 pid:0, 34 color:'success' 35 }, 36 { 37 key:'电视剧', 38 value:'2', 39 checked:false, 40 checkable:true, 41 pid:0, 42 color:'success' 43 }, 44 { 45 key:'综艺', 46 value:'3', 47 checked:false, 48 checkable:true, 49 pid:0, 50 color:'success' 51 }, 52 { 53 key:'动漫', 54 value:'4', 55 checked:false, 56 checkable:true, 57 pid:0, 58 color:'success' 59 } 60 ], 61 twolist:[ 62 { 63 key:'地区', 64 value:'5', 65 checked:false, 66 checkable:false, 67 pid:1, 68 child:[ 69 { 70 key:'中国', 71 value:'8', 72 checked:false, 73 checkable:true, 74 pid:5, 75 }, 76 { 77 key:'韩国', 78 value:'9', 79 checked:false, 80 checkable:true, 81 pid:5, 82 }, 83 { 84 key:'北美', 85 value:'10', 86 checked:false, 87 checkable:true, 88 pid:5, 89 } 90 ] 91 }, 92 { 93 key:'年代', 94 value:'6', 95 checked:false, 96 checkable:false, 97 pid:1, 98 child:[ 99 { 100 key:'1990', 101 value:'11', 102 checked:false, 103 checkable:true, 104 pid:6, 105 }, 106 { 107 key:'1991', 108 value:'12', 109 checked:false, 110 checkable:true, 111 pid:6, 112 } 113 114 ] 115 }, 116 { 117 key:'国家', 118 value:'7', 119 checked:false, 120 checkable:false, 121 pid:1, 122 child:[ 123 { 124 key:'1991', 125 value:'13', 126 checked:false, 127 checkable:true, 128 pid:7, 129 } 130 ] 131 } 132 ], 133 threelist:[ 134 { 135 key:'地区1', 136 value:'5', 137 checked:false, 138 checkable:false, 139 pid:1, 140 child:[ 141 { 142 key:'中国', 143 value:'8', 144 checked:false, 145 checkable:true, 146 pid:5, 147 }, 148 { 149 key:'韩国', 150 value:'9', 151 checked:false, 152 checkable:true, 153 pid:5, 154 }, 155 { 156 key:'北美', 157 value:'10', 158 checked:false, 159 checkable:true, 160 pid:5, 161 } 162 ] 163 }, 164 { 165 key:'年代1', 166 value:'6', 167 checked:false, 168 checkable:false, 169 pid:1, 170 child:[ 171 { 172 key:'1990', 173 value:'11', 174 checked:false, 175 checkable:true, 176 pid:6, 177 }, 178 { 179 key:'1991', 180 value:'12', 181 checked:false, 182 checkable:true, 183 pid:6, 184 } 185 186 ] 187 }, 188 { 189 key:'国家1', 190 value:'7', 191 checked:false, 192 checkable:false, 193 pid:1, 194 child:[ 195 { 196 key:'1991', 197 value:'13', 198 checked:false, 199 checkable:true, 200 pid:7, 201 } 202 ] 203 } 204 ], 205 } 206 }, 207 created(){ 208 209 }, 210 components:{ 211 Tagg 212 }, 213 mounted(){ 214 215 }, 216 methods:{ 217 tagchange(checked,name){ 218 for(var i=0;i<this.onelist.length;i++){ 219 var item = this.onelist[i]; 220 if(item.value == name){ 221 item.checked = true; 222 this.$set(this.onelist,i,item); 223 }else if(item.value != name && item.checked){ 224 item.checked = false; 225 this.$set(this.onelist,i,item); 226 } 227 } 228 } 229 } 230 } 231 </script>
