组件构成
tag
饿了吗官方是jsx写法，不会写，用vue提供的render函数写会编译更加快，但写起来没那么好理解。
依旧使用templete模板编写，这样的总体难度偏低
tag提供两个事件
@close和@click事件
在组件中就要进行事件注册和回调
this.$emit('close',event)
代码
<template>
<transition name="el-zoom-in-center">
<span
class='el-tag '
:class="[
this.type?`el-tag--${type}`:'',
`el-tag--${effect}`
]">
<slot></slot>
<i
@click="handleclose"
v-show="closable"
class='el-tag__close el-icon-close'>
</i>
</span>
</transition>
</template>
<script>
export default {
name: "FanTag",
props: {
closable: {
type: Boolean,
default: false,
},
type: String,
size: String,
effect:{
type:String,
default:'light'
}
},
methods:{
handleclose(event){
console.log(event);
event.stopPropagation();
this.$emit('close', event);
}
}
};
</script>
<style>
</style>
