other / mew-iview

Commit ec4117cb430e63f44e924ab1cf218d3f8b476874

Authored by 梁灏
1 parent 19d41352

tag add prop: name 

when use v-for to render Tag, you can use ‘name’ prop to close tag
Showing 3 changed files with 16 additions and 49 deletions   Show diff stats
Inline Side-by-side
examples/routers/tag.vue
  Show/Hide comments   View file @ec4117c
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Tag>标签一</Tag>  
4 - <Tag>标签二</Tag>  
5 - <Tag closable>标签三</Tag>  
6 - <Tag closable color="blue">标签一</Tag>  
7 - <Tag closable color="green">标签二</Tag>  
8 - <Tag closable color="red">标签三</Tag>  
9 - <Tag closable color="yellow">标签四</Tag>  
10 - <br><br>  
11 - <Tag type="dot">标签一</Tag>  
12 - <Tag type="dot" closable>标签一</Tag>  
13 - <Tag type="dot" color="blue">标签一</Tag>  
14 - <Tag type="dot" color="blue" closable>标签一</Tag>  
15 - <Tag type="dot" color="green">标签一</Tag>  
16 - <Tag type="dot" color="green" closable>标签一</Tag>  
17 - <Tag type="dot" color="red">标签一</Tag>  
18 - <Tag type="dot" color="red" closable>标签一</Tag>  
19 - <Tag type="dot" color="yellow">标签一</Tag>  
20 - <Tag type="dot" color="yellow" closable>标签一</Tag>  
21 - <br><br>  
22 - <Tag type="border">标签一</Tag>  
23 - <Tag type="border" closable>标签一</Tag>  
24 - <Tag type="border" color="blue">标签一</Tag>  
25 - <Tag type="border" color="blue" closable>标签一</Tag>  
26 - <Tag type="border" color="green">标签一</Tag>  
27 - <Tag type="border" color="green" closable>标签一</Tag>  
28 - <Tag type="border" color="red">标签一</Tag>  
29 - <Tag type="border" color="red" closable>标签一</Tag>  
30 - <Tag type="border" color="yellow">标签一</Tag>  
31 - <Tag type="border" color="yellow" closable>标签一</Tag>  
32 - <Button type="primary" @click="modal1 = true">显示对话框</Button>  
33 - <br><br>  
34 - <Tag v-if="ccc" closable @on-close="clickTagClose">标签一</Tag> 3 + <Tag v-for="item in count" :key="item" :name="item" @on-close="close" closable>标签{{ item + 1 }}</Tag>
  4 + <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
35 </div> 5 </div>
36 </template> 6 </template>
37 <script> 7 <script>
38 export default { 8 export default {
39 data () { 9 data () {
40 return { 10 return {
41 - modal1: false,  
42 - loading: true,  
43 - ccc: true 11 + count: 3
44 } 12 }
45 }, 13 },
46 methods: { 14 methods: {
47 - ok () {  
48 - setTimeout(() => {  
49 - this.modal1 = false;  
50 - }, 2000);  
51 - },  
52 - clickTag() {  
53 - console.log('click tag');  
54 - },  
55 - clickTagClose() {  
56 - this.ccc = false;  
57 - console.log('click tag close-icon'); 15 + close (e, name) {
  16 + console.log(e);
  17 + console.log(name);
58 } 18 }
59 } 19 }
60 } 20 }
src/components/card/card.vue
  Show/Hide comments   View file @ec4117c
@@ -58,7 +58,7 @@ @@ -58,7 +58,7 @@
58 if (this.padding !== defaultPadding) { 58 if (this.padding !== defaultPadding) {
59 return { 59 return {
60 padding: `${this.padding}px` 60 padding: `${this.padding}px`
61 - } 61 + };
62 } else { 62 } else {
63 return ''; 63 return '';
64 } 64 }
src/components/tag/tag.vue
  Show/Hide comments   View file @ec4117c
@@ -28,6 +28,9 @@ @@ -28,6 +28,9 @@
28 validator (value) { 28 validator (value) {
29 return oneOf(value, ['border', 'dot']); 29 return oneOf(value, ['border', 'dot']);
30 } 30 }
  31 + },
  32 + name: {
  33 + type: [String, Number]
31 } 34 }
32 }, 35 },
33 computed: { 36 computed: {
@@ -52,8 +55,12 @@ @@ -52,8 +55,12 @@
52 } 55 }
53 }, 56 },
54 methods: { 57 methods: {
55 - close (e) {  
56 - this.$emit('on-close', e); 58 + close (event) {
  59 + if (this.name === undefined) {
  60 + this.$emit('on-close', event);
  61 + } else {
  62 + this.$emit('on-close', event, this.name);
  63 + }
57 } 64 }
58 } 65 }
59 }; 66 };