前言

经常我们会遇到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项目)

.安装插件
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源码新增组件/修改组件的更多相关文章

  1. 修改ElementUI源码实践

    提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...

  2. 修改ElementUI源码

    1.克隆ElementUI官方仓库代码到本地  https://github.com/ElemeFE/element 2.在cmd命令行安装依赖 1)找到代码文件夹 cd element 2)npm ...

  3. 修改ElementUI源码样式

    参考:https://segmentfault.com/a/1190000010932321

  4. elementUI源码修改定制

    1.修改elementUI源码 首先从Git上克隆代码或者下载代码包 进入文件夹打开终端或Git Bash Here,运行npm install 安装依赖包.npm run dev 打开网页http: ...

  5. 记一次ElementUI源码修改过程

    修改目的 使用ElementUI el-tree过程发现选中节点,键盘移动上下键时(key down\key up)el-tree默认高亮移动的节点,业务上需要重写此事件. ​从官网发现该事件没有暴露 ...

  6. YARN DistributedShell源码分析与修改

    YARN DistributedShell源码分析与修改 YARN版本:2.6.0 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述 2 YARN Distrib ...

  7. 神器如 dnSpy,无需源码也能修改 .NET 程序

    dnSpy 是 0xd4d 开发的 .NET 程序调试神器. 说它是神器真的毫不为过!它能在完全没有源码的情况下即时调试程序,甚至还能修改程序!本文讲向大家介绍如何使用 dnSpy 修改 .NET 程 ...

  8. 修改CAS源码是的基于DB的认证方式配置更灵活

    最近在做CAS配置的时候,遇到了数据源不提供密码等数据的情况下,怎样实现密码输入认证呢? 第一步:新建Java项目,根据假面算法生成CAS加密工具 出于保密需要不提供自定义的加密工具,在您的实际项目中 ...

  9. 12 哈希表相关类——Live555源码阅读(一)基本组件类

    12 哈希表相关类--Live555源码阅读(一)基本组件类 这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 ...

随机推荐

  1. 再次思考 classpath 环境变量 等

    f:\aspectj1.8\lib\aspectjrt.jar;.;%JAVA_HOME%\lib;C:\Temp\IBM\SQLLIB\java\db2java.zip;C:\Temp\IBM\SQ ...

  2. Java class,Object,Class的区别

    代码: http://www.cnblogs.com/hongdada/p/6060487.html package com.company; public class Main { public s ...

  3. Hi, there!

    Wish you a happy day~我们一起玩WEB前端!^ ^

  4. Geometry Stage in Rendering pipeline (读书笔记2 --- Real-Time rendering)

    Geometry Stage一般包含下面几个阶段 1. Model & View Transform(模型和视图变换) --- 模型空间--> 世界空间 模型变换:每个模型经过模型变换来 ...

  5. 使Maven 2在package、install等阶段跳过运行Test的配置

    方法1: To skip running the tests for a particular project, set the skipTests property to true.<proj ...

  6. Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  7. Qt之QTableView显示富文本(使用了QAbstractTextDocumentLayout和QTextDocument)

    http://blog.csdn.net/liang19890820/article/details/50973099

  8. JDBC连接mysql编程

    基本操作 package jdbc; import java.sql.Statement; import java.util.Scanner; import java.sql.Connection; ...

  9. netcat

    一.概述 netcat是网络工具中的瑞士军刀,它能通过TCP和UDP在网络中读写数据.通过与其他工具结合和重定向,你可以在脚本中以多种方式使用它.使用netcat命令所能完成的事情令人惊讶.netca ...

  10. SQL 查询时间段内的时间

    declare @dt1 as datetime declare @dt2 as datetime set @dt1 = '2008-01-01' set @dt2 = '2009-01-01' ;w ...