Vue2 组件:tab 标签页

这个组件实现了: 支持设置默认选中 支持 tab 嵌套 支持设置 tab 面签的排列方向 实现这个 tab 标签页效果我把它细分成了三个文件(Tabs.vue,TabsNav.vue,TabsPannel.vue).下面我们直接来看代码: Tabs.vue <template> <div :class="`ku-tabs ${finallyTabsPosition}`" v-if="panesSlots.length > 0"> <div class="ku-tabs-header"> <ku-tabs-nav ></ku...

2018
10-17

Vue2 组件:进度条

组件实现了: 可自定义进度条颜色 可自定义进度条高度 进度文字位置可指定 进度条动画时长 效果图: 现在我们就来看看组件要怎么实现 代码 <template> <div class="ku-progress-box" :class="{true:'outer '+ textPosition ,false:'inner '+ textPosition}[isOuter] " :style="`height:${barHeight}px`"> <div class="ku-progress-line-bar" :style="`border-radius:${barHe...

2018
10-17

Vue2 实现代码高亮功能

前言 本来这是一个很简单的问题,直接引入第三方插件,然后安装第三方插件的教程写几行代码就可以了,但这是理想的状态,在实际开发中,肯定会遇到各种情况,导致代码没有亮度。 基于 highlight.js 实现 安装 highlinght.js npm install highlight.js 下面我们先来基本按照 highlight.js 官方教程来实践一下。 引入 js 库 highlight.js 和样式表 github.css,官方提供了很多种主题,所有的主题样式文...

2018
04-15

Vue2 App 框架级页面过渡效果(IOS 版)

前言 页面过渡效果现在的 APP 一抓一大把,比如:微信,QQ。个人认为页面的过渡效果对于提高用户体验来说,有很大的作用。谁不喜欢看到一个活生生的应用,谁又会喜欢古董级的应用?所以这篇文章就是让你体验下页面平滑过渡的那种细腻的,如丝般顺滑的感觉,感觉有了什么都好说。 这里说的 IOS 版本不是说只适用于 IOS ,而是页面效果切换是类 IOS 的切换动画效果。 Vue 页面过渡之旅 那我们就开始吧,...

2018
03-24

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

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

2018
03-13

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

Vue2 实现时空穿梭框功能模块

前言 这篇文章主要是分享一个时空穿梭框功能,也就是我们平时用的选择功能。勾选了的项就会进入到另一个框中。 时空穿梭框之旅 示例演示: 这个时空穿梭框实现了: 1、可以全选、反选 2、没有选中时,不可以点穿梭按钮 3、自动计数(共有多少个,选中了多少个) 4、没有数据时,全选不可点击 这里主要是想通过这个示例来抛砖引玉,更多的功能,你可以根据自己的实践需要来实现。下面我们就来看看这...

2018
02-22

Vue2 实现树形菜单(多级菜单)功能模块

前言 之前博客里分享过一篇用《Angular 实现树形菜单(多级菜单)功能模块》,而在由于战略转移,所以我给 Vue 也来了一份。功能差不多,不过由于这个是第二次做,会对之前的一些不足作一个修正。下面来看看 Vue 树形菜单。 在做这个 DEMO 的时候我是用了vue 的脚手架(vue-cli)的,关于脚手架可以看这里《Vue 脚手架(vue-cli)安装及详解》所以结构看起来就像下面这样: 结构示意图 ├── index.html ├─...

2018
02-15