css 就是设置样式， js就是控制行为
<script>
export default {
name: "ElTag",
props: {
text: String, // ! ? 没找到这个的用处
closable: Boolean, // 是否可关闭 js
type: String, // success/info/warning/danger css
hit: Boolean, // 是否有边框描边 css
disableTransitions: Boolean, // 是否禁用渐变动画 css
color: String, // 背景色 css style
size: String, //尺寸 css
// 主题 css
effect: {
type: String,
default: "light",
validator(val) {
return ["dark", "light", "plain"].indexOf(val) !== -1;
},
},
},
methods: {
handleClose(event) {
event.stopPropagation(); // 阻止冒泡
this.$emit("close", event);
},
handleClick(event) {
this.$emit("click", event);
},
},
computed: {
tagSize() {
return this.size || (this.$ELEMENT || {}).size; // ? this.$ELEMENT
},
},
render(h) {
const { type, tagSize, hit, effect } = this;
const classes = [ // className
"el-tag",
type ? `el-tag--${type}` : "",
tagSize ? `el-tag--${tagSize}` : "",
effect ? `el-tag--${effect}` : "",
hit && "is-hit",
];
const tagEl = (
<span
class={classes}
style={{ backgroundColor: this.color }}
on-click={this.handleClick}
>
{this.$slots.default}
{this.closable && (
<i
class="el-tag__close el-icon-close"
on-click={this.handleClose}
></i>
)}
</span>
);
return this.disableTransitions ? (
tagEl
) : (
<transition name="el-zoom-in-center">{tagEl}</transition>
);
},
};
</script>
