elementUIソースの新規コンポーネントの変更/コンポーネントの変更

5107 ワード

前言
常にelementUIコンポーネントライブラリの5%が私たちのニーズに達していないことに遭遇します.第一に、コンポーネントを書き直し、第二に、ソースコードを変更します.
 
elementのインストール
https://github.com/ElemeFE/element.git

 
新規コンポーネント
1.packages alertText/src/main.vue



"</span><span style="color:#800000;">text/babel</span><span style="color:#800000;">"</span>><span style="color:#000000;">
export </span><span style="color:#0000ff;">default</span><span style="color:#000000;"> {
  name: </span><span style="color:#800000;">'</span><span style="color:#800000;">ElAlertText</span><span style="color:#800000;">'</span><span style="color:#000000;">,
  props: {
    typeInput: String
  },
  methods: {
    change(val) {
      </span><span style="color:#0000ff;">this</span>.$emit(<span style="color:#800000;">'</span><span style="color:#800000;">changeInput</span><span style="color:#800000;">'</span><span style="color:#000000;">, val);
    }
  }
};
</span>

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 


<span style="color:#000000;">
export </span><span style="color:#0000ff;">default</span><span style="color:#000000;"> {
  data() {
    </span><span style="color:#0000ff;">return</span><span style="color:#000000;"> {
      typeInput: </span><span style="color:#800000;">'</span><span style="color:#800000;">password</span><span style="color:#800000;">'</span><span style="color:#000000;">
    }
  },
  methods: {
    changeInput(val) {
      console.log(val)
    },
  }
}
</span>

 
転載先:https://www.cnblogs.com/gqx-html/p/10826464.html