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 相关文章推荐
jquery动态加载js三种方法实例
Aug 03 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
JS深入学习之数组对象排序操作示例
May 01 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
海贼王:最美的悬赏令!
2020/03/02 日漫
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
php函数式编程简单示例
2019/08/08 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
详解React 元素渲染
2020/07/07 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
原生JS实现音乐播放器
2021/01/26 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python isinstance函数用法详解
2020/02/13 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
人事文员岗位职责
2014/02/16 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL