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 依赖

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>

展示效果:

2.5 color 属性,背景色,类型 string,无默认值。

组件使用:

展示效果:

2.6 size 属性,尺寸,类型 string,medium / small / mini,无默认值。

2.7 effect 属性,主题,类型 string,dark / light / plain,默认 light。

三、tag 组件方法

3.1 click 事件,点击 tag 时触发的事件。

3.2 close 事件,关闭 tag 时触发的事件。

相关推荐
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js