前言
经常我们会遇到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>
转自:https://www.cnblogs.com/gqx-html/p/10826464.html