Vue2 Element dom.js 详解

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

2018
03-14

Vue2 Element 模仿秀-输入框篇(Input)

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

2018
03-13

Vue2 Element calcTextareaHeight.js 详解

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

2018
03-12

Vue2 Element 模仿秀-多选框篇(Checkbox)

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

2018
03-07

Vue2 Element emitter.js 详解

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

2018
03-06

Vue2 Element 模仿秀-单选框篇(Radio)

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

2018
03-02

Vue2 Element 模仿秀-按钮篇(Button)

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

2018
02-23