drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Checkable tag

Browse source
This commit is contained in:
daiyanze 2017-10-18 17:13:06 +09:00
parent 2e8add2fb3
commit dc39cc3163
2 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
examples/routers/tag.vue
View file

@ -1,6 +1,7 @@
<template>
<div>
<Tag v-for="item in count" :key="item" :name="item" @on-close="close" closable>标签{{ item + 1 }}</Tag>
<Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable>标签{{ item + 1 }}</Tag>
<Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable checkable>标签{{ 1 - item }}</Tag>
<Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
</div>
</template>
@ -9,13 +10,17 @@
data () {
return {
count: 3
}
};
},
methods: {
close (e, name) {
console.log(e);
console.log(name);
},
check (e, name) {
console.log(e);
console.log(name);
}
}
}
};
</script>

34
src/components/tag/tag.vue
View file

@ -1,7 +1,8 @@
<template>
<transition name="fade">
<div :class="classes">
<span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
<div :class="classes" @click.stop="check">
<span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span>
<Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
</div>
</transition>
</template>
@ -19,6 +20,14 @@
type: Boolean,
default: false
},
checkable: {
type: Boolean,
default: false
},
checked: {
type: Boolean,
default: true
},
color: {
validator (value) {
return oneOf(value, ['blue', 'green', 'red', 'yellow', 'default']);
@ -33,14 +42,20 @@
type: [String, Number]
}
},
data () {
return {
isChecked: this.checked
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.color}`]: !!this.color,
[`${prefixCls}-${this.color}`]: !!this.color && (this.checkable && this.isChecked),
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-closable`]: this.closable
[`${prefixCls}-closable`]: this.closable,
[`${prefixCls}-checkable`]: this.checkable
}
];
},
@ -56,10 +71,17 @@
},
methods: {
close (event) {
this._emitAction(event, 'on-close');
},
check (event) {
this.isChecked = !this.isChecked;
this._emitAction(event, 'on-check');
},
_emitAction (event, action) {
if (this.name === undefined) {
this.$emit('on-close', event);
this.$emit(action, event);
} else {
this.$emit('on-close', event, this.name);
this.$emit(action, event, this.name);
}
}
}