一个 dom.js 模块功能比较简单，把一些常用的 dom 操作封装在这里。比如：类的添加删除，样式的设置等。 dom.js /* istanbul ignore next */ import Vue from 'vue'; // 运行环境 const isServer = Vue.prototype.$isServer; // 匹配 “:”，“-”，“_” 中的任意一个，但每一个都可以重复，并且连带后面的一个字符（用于改为大写） const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g; // 匹配 moz开头...

前方 这里文章主要分享Element 对 input 输入框在组件封装。但是本文没有把关于 input 的输入框所有组件都模仿一遍，原因有二：1、官方介绍 input 类组件中包括了其它组件相对较复杂的组件，比如：select 组件、autocomplete 组件，在这里我打算把它分开来模仿。2、如果都放在一篇文章中，代码会很多，不便于阅读理解。 文件结构 ├── index.html ├── mixins │ └── emitter.js ├── utils │ ├── cal...

前言 这是在模仿 input 的 textarea 的时候遇到的一个文件，这个文件主要的作用就是实现 textarea 的高度可自适应的功能，代码量不多，但也有必要解释下里面的代码是什么意思。下面直接把代码贴出来。代码中含有注释。 calcTextareaHeight.js 深入浅出 calcTextareaHeight.js let hiddenTextarea; // 预置一些样式，供后面直接使用 const HIDDEN_STYLE = ` height:0 !important; visibility:h...

前言 这篇主要是介绍 Vue Element 中的多选框，没有太多的言语，放都放在了代码的字里行间中，下面我们就来看看 Element 官方组件库是怎么实现 checkbox 组件的。代码比较多，建议要有针对性地看。比如，你在看源码的时候没看懂，那么你看到这篇文章就再好不过了。 在开始之前我们先来简单的看看代码文件结构： ├── index.html ├── assets │ ├── fonts │ │ ├── yunkus-icons.ttf │ │ └── yunksu...

最近在学习 Vue Element 组件库的时候，遇到了一个 emitter.js，一开始不是很理解它的作用，后面慢慢地就明白了其中的奥秘，所以在这里记录下来，分享有需要的朋友，如果你是大神，那么请跳过，以免浪费你宝贵的时间。毕竟人生苦短，流年似水，韶华难再。 emitter.js function broadcast(componentName, eventName, params) { this.$children.forEach(child => { var name = child.$options.co...

前言 这里 Vue Element 模仿秀的第二篇：单选框。经过第一篇的洗礼，对 Element 组件库有了基本的了解，并慢慢地爱上了 Element 模仿秀，在模仿的过程当中，真的可以学到很多东西，有一种豁然开朗，柳暗花明又一村的感觉，下面进入正题。 在开始之前，我们不妨先来看看模仿秀的示例演示： 效果图跟官方的基本保持一致，功能也非常接近。下面我们就来深入代码内部，看看 Element 源码的大致实现思路，代码...

前言 Element UI 做得还是不错的，我第一次看到时都被征服了。所以我觉得有必需把官方的示例尽可能的自己撸一遍。从中一定可以学到不少东西。 这篇文章是 Vue Element 模仿秀的第一篇：按钮组件。 文件结构 ├── index.html ├── assets │ ├── fonts │ │ ├── yunkus-icons.ttf │ │ └── yunkus-icons.woff │ └── icon.css ├── main.js ├── router │ └── index.js # 路由配置文件 └─...