修改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.jsimport 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项目)

.安装插件
npm install.替换lib
找到node_modules/_element-ui@2.4.@element-ui/lib进行替换

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

.运行项目
npm run dev.在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>