修改elementUI源碼新增組件/修改組件

前言

經常我們會遇到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/_element-ui@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>