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 时触发的事件。

相关推荐
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven1 小时前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾1 小时前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
然我1 小时前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
前端付豪1 小时前
12、表单系统设计:动态表单 + 校验 + 可配置化
前端·javascript·架构