修改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中加入
打包(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>
修改elementUI源码新增组件/修改组件的更多相关文章
- 修改ElementUI源码实践
提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...
- 修改ElementUI源码
1.克隆ElementUI官方仓库代码到本地 https://github.com/ElemeFE/element 2.在cmd命令行安装依赖 1)找到代码文件夹 cd element 2)npm ...
- 修改ElementUI源码样式
参考:https://segmentfault.com/a/1190000010932321
- elementUI源码修改定制
1.修改elementUI源码 首先从Git上克隆代码或者下载代码包 进入文件夹打开终端或Git Bash Here,运行npm install 安装依赖包.npm run dev 打开网页http: ...
- 记一次ElementUI源码修改过程
修改目的 使用ElementUI el-tree过程发现选中节点,键盘移动上下键时(key down\key up)el-tree默认高亮移动的节点,业务上需要重写此事件. 从官网发现该事件没有暴露 ...
- YARN DistributedShell源码分析与修改
YARN DistributedShell源码分析与修改 YARN版本:2.6.0 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述 2 YARN Distrib ...
- 神器如 dnSpy,无需源码也能修改 .NET 程序
dnSpy 是 0xd4d 开发的 .NET 程序调试神器. 说它是神器真的毫不为过!它能在完全没有源码的情况下即时调试程序,甚至还能修改程序!本文讲向大家介绍如何使用 dnSpy 修改 .NET 程 ...
- 修改CAS源码是的基于DB的认证方式配置更灵活
最近在做CAS配置的时候,遇到了数据源不提供密码等数据的情况下,怎样实现密码输入认证呢? 第一步:新建Java项目,根据假面算法生成CAS加密工具 出于保密需要不提供自定义的加密工具,在您的实际项目中 ...
- 12 哈希表相关类——Live555源码阅读(一)基本组件类
12 哈希表相关类--Live555源码阅读(一)基本组件类 这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 ...
随机推荐
- C#中Chart的简单使用(柱状图和折线图)
首先创建一个windows窗体应用程序,在工具箱—>数据中拖拽一个Chart控件,设置ChartArea背景色为黄色,Legend背景色为绿色,三个Series,Name属性分别为1,2,3,添 ...
- MPSoc之Hello World学习笔记
XILINX 新一代 SOC,Zynq UltraScale+ MPSOC 系列性能强悍无比,号称相比ZYNQ 7000系列每瓦性能提升5倍,一直想体验.近期因项目需要,入手了一套米尔的MPSoc开发 ...
- pandas-06 Series和Dataframe的排序操作
pandas-06 Series和Dataframe的排序操作 对pandas中的Series和Dataframe进行排序,主要使用sort_values()和sort_index(). DataFr ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- 使用vue-cli搭建vue项目问题解决方案
工欲善其事必先利其器,安装所需环境 node和npm的安装 首先需要安装node环境,直接到官网下载安装包 https://nodejs.org/zh-cn/ 安装node默认安装npm, 不需要重复 ...
- 微信小程序下拉框组件
>>下拉组件 1.组件结构: 2.index.js: //index.js Component({ /** * 组件的属性列表 */ properties: { propArray: { ...
- php正则表达式中preg_match_all函数的详解
php正则表达式中的函数我们之前为大家结果一个preg_match函数,相信大伙对此有所了解,那么php正则表达式中preg_match_all函数的具体使用是如何的呢?今天我们就带大家了解php正则 ...
- iOS多线程GCD简介(二)
在上一篇中,我们主要讲了Dispatch Queue相关的内容.这篇主要讲一下一些和实际相关的使用实例,Dispatch Groups和Dispatch Semaphore. dispatch_aft ...
- Java开发环境之Eclipse
查看更多Java开发环境配置,请点击<Java开发环境配置大全> 拾壹章:Eclipse安装教程 1)去官网下载安装包 http://www.eclipse.org/downloads/ ...
- spark 程序 windows 运行报错
1 java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries. at ...