iView tag 多个标签只能选择一个(测试)

Posted 2021-01-24 512178509

现有的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>

View Code

添加了对父类组件的传递的数据的监听   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>

View Code