修改elementUI源码新增组件/修改组件

Posted 2021-11-28 gqx-html

前言

经常我们会遇到elementUI组件库期间有5%达不到我们想要的需求，第一我们重新写组件，第二我们改源码

 

安装element

https://github.com/ElemeFE/element.git

 

新建组件

1.packages文件夹中新建alertText/src/main.vue

<template>
  <div>
    <div>新增alertText组件测试</div>
    <input :type="typeInput"
           placeholder="请输入"
           @change="change" />
  </div>
</template>

<script type="text/babel">
export default {
  name: ‘ElAlertText‘,
  props: {
    typeInput: String
  },
  methods: {
    change(val) {
      this.$emit(‘changeInput‘, val);
    }
  }
};
</script>

2.packages文件夹中新建alertText/index.js

import AlertText from ‘./src/main‘;

/* istanbul ignore next */
AlertText.install = function(Vue) {
  Vue.component(AlertText.name, AlertText);
};

export default AlertText;

3.src/index.js  //新增以下

import AlertText from ‘../packages/alertText/index.js‘;  
const components = [AlertText]   
export default {AlertText}   

4.packages/theme-chalk/alertText.scss其中可以加入样式

5.components.json中加入

  {"alertText": "./packages/alertText/index.js"}

 

 

打包(lib文件)

npm run dist

 

替换lib文件(新增/已有vue项目)

1.安装插件
   npm install

2.替换lib
   找到node_modules/[email protected]2.4.6@element-ui/lib进行替换

 

运行(新增/已有vue项目)

1.运行项目
npm run dev

2.在xxx.vue页面中引用
<template>
      <el-alertText :type-input="typeInput"
                    @changeInput="changeInput" />
</template>

<script>
export default {
  data() {
    return {
      typeInput: ‘password‘
    }
  },
  methods: {
    changeInput(val) {
      console.log(val)
    },
  }
}
</script>