elementUIソースの新規コンポーネントの変更/コンポーネントの変更
5107 ワード
前言
常にelementUIコンポーネントライブラリの5%が私たちのニーズに達していないことに遭遇します.第一に、コンポーネントを書き直し、第二に、ソースコードを変更します.
elementのインストール
新規コンポーネント
{"alertText": "./packages/alertText/index.js"}
パッケージ(libファイル)
libファイルの置き換え(vueプロジェクトの新規/既存)
実行(新規/既存vueプロジェクト)
転載先:https://www.cnblogs.com/gqx-html/p/10826464.html
常にelementUIコンポーネントライブラリの5%が私たちのニーズに達していないことに遭遇します.第一に、コンポーネントを書き直し、第二に、ソースコードを変更します.
elementのインストール
https://github.com/ElemeFE/element.git
新規コンポーネント
1.packages alertText/src/main.vue
alertText
"typeInput"
placeholder=" "
@change="change" />
"</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
"typeInput"
@changeInput="changeInput" />
<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