element-ui tag 组件源码分享-编程知识

element-ui tag 组件源码分享

今日简单分享一下 tag 组件的源码实现，主要从以下三个方面来分享：

1、tag 组件页面结构

2、tag 组件属性

3、tag 组件方法

一、tag 组件页面结构

vue2 中使用 jsx 语法小结：

1.1 需要安装 babel-plugin-transform-vue-jsx 和 @vue/babel-helper-vue-jsx-merge-props 依赖

npm install --save-dev babel-plugin-transform-vue-jsx @vue/babel-helper-vue-jsx-merge-props

2、需要配置 babel 文件

{  "plugins": [  ["transform-vue-jsx", {  "functional": false  }]  ]  
}

3、使用 jsx

export default {  name: 'MyComponent',  props: {  msg: String  },  render(h) {  return (  <div>  <h1>{this.msg}</h1>  <button onClick={() => alert('Hello World!')}>Click Me</button>  </div>  );  }  
}

二、tag 组件方法

2.1 type 属性，类型，类型 string，success/info/warning/danger，无默认值。

2.2 closable 属性，是否可关闭，类型 boolean，默认 false。

组件使用部分：

展示效果：

2.3 disable-transitions 属性，是否禁用渐变动画，类型 boolean，默认 false。

组件使用：

<template><el-tagv-for="(item) in tag":key="item.id"type="success":disable-transitions="item.id == 0"closable@close="handleClose(item)">disable-transitions:{{item.id == 0}}</el-tag>
</template><script>export default {data() {return {tag: [{id: 0,title: 'tag 1',},{id: 1,title: 'tag 2',},],};},methods: {handleClose({ id }) {const index = this.tag.findIndex((item) => item.id == id);this.tag.splice(index, 1);},},};
</script>

展示效果：

2.4 hit 属性，是否有边框描边，类型 boolean，默认 false。

组件使用：

<template><el-tagv-for="(item) in tag":key="item.id"type="success":hit="item.id==0">hit:{{item.id == 0}}</el-tag>
</template><script>export default {data() {return {tag: [{id: 0,title: 'tag 1',},{id: 1,title: 'tag 2',},],};},};
</script>

展示效果：