element-ui tag 组件源码分享

jqh_04842024-04-03 18:39

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

1、tag 组件页面结构

2、tag 组件属性

3、tag 组件方法

一、tag 组件页面结构

vue2 中使用 jsx 语法小结：

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

javascript 复制代码

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

2、需要配置 babel 文件

javascript 复制代码

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

3、使用 jsx

javascript 复制代码

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。

组件使用：

javascript 复制代码

<template>
  <el-tag
    v-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。

组件使用：

javascript 复制代码

<template>
  <el-tag
    v-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>

展示效果：