Vue组件开发技巧总结


Posted in Javascript onMarch 04, 2018

前言

临近毕业,写了个简单个人博客,项目地址是点我访问项目地址(顺便求star),本篇是系列总结第一篇。接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件。

正文

Vue 单文件组件开发

当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式。

// 注册
Vue.component('my-component', {
 template: '<div>A custom component!</div>'
})

// 创建根实例
new Vue({
 el: '#example'
})

接下来,开始写一个dialog组件。

Dialog

目标对话框组件的基本样式如图:

Vue组件开发技巧总结

根据目标样式,可以总结出:

  1. dialog组件需要一个titleprops来标示弹窗标题
  2. dialog组件需要在按下确定按钮时发射出确定事件(即告诉父组件确定了)
  3. 同理,dialog组件需要发射出取消事件
  4. dialog组件需要提供一个插槽,便于自定义内容

那么,编码如下:

<template>
 <div class="ta-dialog__wrapper">
 <div class="ta-dialog">
  <div class="ta-dialog__header">
  <span>{{ title }}</span>
  <i class="ios-close-empty" @click="handleCancel()"></i>
  </div>
  <div class="ta-dialog__body">
  <slot></slot>
  </div>
  <div class="ta-dialog__footer">
  <button @click="handleCancel()">取消</button>
  <button @click="handleOk()">确定</button>
  </div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'Dialog',

 props: {
 title: {
  type: String,
  default: '标题'
 },
 },

 methods: {
 handleCancel() {
  this.$emit('cancel')
 },

 handleOk() {
  this.$emit('ok')
 },
 },
}
</script>

这样便完成了dialog组件的开发,使用方法如下:

<ta-dialog 
 title="弹窗标题" 
 @ok="handleOk" 
 @cancel="handleCancel">
 <p>我是内容</p>
</ta-dialog>

这时候发现一个问题,通过使用v-if或者v-show来控制弹窗的展现时,没有动画!!!,看上去很生硬。教练,我想加动画,这时候就该transition组件上场了。使用transition组件结合css能做出很多效果不错的动画。接下来增强dialog组件动画,代码如下:

<template>
 <transition name="slide-down">
 <div class="ta-dialog__wrapper" v-if="isShow">
  // 省略
 </div>
 </transition>
</template>

<script>
export default {

 data() {
 return {
  isShow: true
 }
 },

 methods: {
 handleCancel() {
  this.isShow = false
  this.$emit('cancel')
 },

 handleOk() {
  this.isShow = true
  this.$emit('ok')
 },
 },
}
</script>

可以看到transition组件接收了一个nameprops,那么怎么编写css完成动画呢?很简单的方式,写出两个
关键class(css 的 className)样式即可:

.slide-down-enter-active {
 animation: dialog-enter ease .3s;
}

.slide-down-leave-active {
 animation: dialog-leave ease .5s;
}

@keyframes dialog-enter {
 from {
 opacity: 0;
 transform: translateY(-20px);
 }

 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes dialog-leave {
 from {
 opacity: 1;
 transform: translateY(0);
 }

 to {
 opacity: 0;
 transform: translateY(-20px);
 }
}

就是这么简单就开发出了效果还不错的动效,注意transition组件的name为slide-down,而编写的动画的关键className为slide-down-enter-active和slide-down-leave-active。

封装Dialog做MessageBox

Element的MessageBox的使用方法如下:

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
}).then(() => {
 this.$message({
 type: 'success',
 message: '删除成功!'
 });
}).catch(() => {
 this.$message({
 type: 'info',
 message: '已取消删除'
 });   
});

看到这段代码,我的感觉就是好神奇好神奇好神奇(惊叹三连)。仔细看看,这个组件其实就是一个封装好的dialog,

Vue组件开发技巧总结

接下来,我也要封装一个这样的组件。首先,整理下思路:

  1. Element的使用方法是this.$confirm,这不就是挂到Vue的prototype上就行了
  2. Element的then是确定,catch是取消,promise就可以啦

整理好思路,我就开始编码了:

import Vue from 'vue'
import MessgaeBox from './src/index'

const Ctur = Vue.extend(MessgaeBox)
let instance = null

const callback = action => {
 if (action === 'confirm') {
 if (instance.showInput) {
  instance.resolve({ value: instance.inputValue, action })
 } else {
  instance.resolve(action)
 }
 } else {
 instance.reject(action)
 }

 instance = null
}

const showMessageBox = (tip, title, opts) => new Promise((resolve, reject) => {
 const propsData = { tip, title, ...opts }

 instance = new Ctur({ propsData }).$mount()
 instance.reject = reject
 instance.resolve = resolve
 instance.callback = callback

 document.body.appendChild(instance.$el)
})


const confirm = (tip, title, opts) => showMessageBox(tip, title, opts)

Vue.prototype.$confirm = confirm

至此,可能会疑惑怎么callback呢,其实我编写了一个封装好的dialog并将其命名为MessageBox,
它的代码中,有这样两个方法:

onCancel() {
 this.visible = false
 this.callback && (this.callback.call(this, 'cancel'))
},

onConfirm() {
 this.visible = false
 this.callback && (this.callback.call(this, 'confirm'))
},

没错,就是确定和取消时进行callback。我还想说一说Vue.extend,代码中引入了MessageBox,

我不是直接new MessageBox而是借助new Ctur,因为这样可以定义数据(不仅仅是props),例如:

instance = new Ctur({ propsData }).$mount()

这时候,页面上其实是还没有MessageBox的,我们需要执行:

document.body.appendChild(instance.$el)

如果你直接这样,你可能会发现MessageBox打开的时候没有动画,而关闭的时候有动画。解决方法也很简单,
appendChild的时候让其仍是不可见,然后使用类这样的代码:

Vue.nextTick(() => instance.visible = true)

这样就有动画了。

总结

  1. 通过transition和css实现不错的动画。其中,transition组件的name决定了编写css的两个关键类名为[name]-enter-active和[name]-leave-active
  2. 通过Vue.extend继承一个组件的构造函数(不知道怎么说合适,就先这样说),然后通过这个构造函数,便可以实现组件相关属性的自定义(使用场景:js调用组件)
  3. js调用组件时,为了维持组件的动画效果可以先document.body.appendChild 然后Vue.nextTick(() => instance.visible = true)

到此,简单的Vue组件开发就总结完了,我写的相关代码在地址,https://github.com/mvpzx/elapse/tree/master/be/src/components

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
代码详解javascript模块加载器
Mar 04 #Javascript
Vue用v-for给src属性赋值的方法
Mar 03 #Javascript
vue中v-for加载本地静态图片方法
Mar 03 #Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 #Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 #Javascript
vue.js select下拉框绑定和取值方法
Mar 03 #Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
php 前一天或后一天的日期
2008/06/28 PHP
yii操作session实例简介
2014/07/31 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python FTP操作类代码分享
2014/05/13 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python fileinput模块使用实例
2015/06/03 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
django如何实现视图重定向
2019/07/24 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
C语言笔试题
2014/09/04 面试题
办理生育手续介绍信
2014/01/14 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书