Vue組件開發(fā)技巧總結(jié)

前言

臨近畢業(yè)，寫了個(gè)簡單個(gè)人博客，項(xiàng)目地址是點(diǎn)我訪問項(xiàng)目地址（順便求star），本篇是系列總結(jié)第一篇。接下來會(huì)一步一步模仿一個(gè)低配版的Element 的對話框和彈框組件。

成都創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)10年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：成都酒樓設(shè)計(jì)等企業(yè)，備受客戶贊揚(yáng)。

正文

Vue 單文件組件開發(fā)

當(dāng)使用vue-cli初始化一個(gè)項(xiàng)目的時(shí)候，會(huì)發(fā)現(xiàn)src/components文件夾下有一個(gè)HelloWorld.vue文件，這便是單文件組件的基本開發(fā)模式。

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

// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example'
})

接下來，開始寫一個(gè)dialog組件。

Dialog

目標(biāo)對話框組件的基本樣式如圖：

Vue組件開發(fā)技巧總結(jié)

根據(jù)目標(biāo)樣式，可以總結(jié)出：

dialog組件需要一個(gè)titleprops來標(biāo)示彈窗標(biāo)題
dialog組件需要在按下確定按鈕時(shí)發(fā)射出確定事件（即告訴父組件確定了）
同理，dialog組件需要發(fā)射出取消事件
dialog組件需要提供一個(gè)插槽，便于自定義內(nèi)容

那么，編碼如下:

<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: '標(biāo)題'
 },
 },

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

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

這樣便完成了dialog組件的開發(fā)，使用方法如下：

<ta-dialog 
 title="彈窗標(biāo)題" 
 @ok="handleOk" 
 @cancel="handleCancel">
 <p>我是內(nèi)容</p>
</ta-dialog>

這時(shí)候發(fā)現(xiàn)一個(gè)問題，通過使用v-if或者v-show來控制彈窗的展現(xiàn)時(shí)，沒有動(dòng)畫！??！，看上去很生硬。教練，我想加動(dòng)畫,這時(shí)候就該transition組件上場了。使用transition組件結(jié)合css能做出很多效果不錯(cuò)的動(dòng)畫。接下來增強(qiáng)dialog組件動(dòng)畫，代碼如下:

<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組件接收了一個(gè)nameprops，那么怎么編寫css完成動(dòng)畫呢？很簡單的方式，寫出兩個(gè)
關(guān)鍵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);
 }
}

就是這么簡單就開發(fā)出了效果還不錯(cuò)的動(dòng)效，注意transition組件的name為slide-down,而編寫的動(dòng)畫的關(guān)鍵className為slide-down-enter-active和slide-down-leave-active。

封裝Dialog做MessageBox

Element的MessageBox的使用方法如下:

this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
 confirmButtonText: '確定',
 cancelButtonText: '取消',
 type: 'warning'
}).then(() => {
 this.$message({
 type: 'success',
 message: '刪除成功!'
 });
}).catch(() => {
 this.$message({
 type: 'info',
 message: '已取消刪除'
 });   
});

看到這段代碼，我的感覺就是好神奇好神奇好神奇（驚嘆三連）。仔細(xì)看看，這個(gè)組件其實(shí)就是一個(gè)封裝好的dialog,

Vue組件開發(fā)技巧總結(jié)

接下來，我也要封裝一個(gè)這樣的組件。首先，整理下思路：

Element的使用方法是this.$confirm，這不就是掛到Vue的prototype上就行了
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

至此，可能會(huì)疑惑怎么callback呢，其實(shí)我編寫了一個(gè)封裝好的dialog并將其命名為MessageBox,
它的代碼中，有這樣兩個(gè)方法:

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

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

沒錯(cuò)，就是確定和取消時(shí)進(jìn)行callback。我還想說一說Vue.extend,代碼中引入了MessageBox,

我不是直接new MessageBox而是借助new Ctur，因?yàn)檫@樣可以定義數(shù)據(jù)(不僅僅是props)，例如：

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

這時(shí)候，頁面上其實(shí)是還沒有MessageBox的，我們需要執(zhí)行:

document.body.appendChild(instance.$el)

如果你直接這樣，你可能會(huì)發(fā)現(xiàn)MessageBox打開的時(shí)候沒有動(dòng)畫，而關(guān)閉的時(shí)候有動(dòng)畫。解決方法也很簡單，
appendChild的時(shí)候讓其仍是不可見，然后使用類這樣的代碼：

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

這樣就有動(dòng)畫了。

總結(jié)

通過transition和css實(shí)現(xiàn)不錯(cuò)的動(dòng)畫。其中，transition組件的name決定了編寫css的兩個(gè)關(guān)鍵類名為[name]-enter-active和[name]-leave-active
通過Vue.extend繼承一個(gè)組件的構(gòu)造函數(shù)（不知道怎么說合適，就先這樣說），然后通過這個(gè)構(gòu)造函數(shù)，便可以實(shí)現(xiàn)組件相關(guān)屬性的自定義（使用場景：js調(diào)用組件）
js調(diào)用組件時(shí)，為了維持組件的動(dòng)畫效果可以先document.body.appendChild 然后Vue.nextTick(() => instance.visible = true)

到此，簡單的Vue組件開發(fā)就總結(jié)完了，我寫的相關(guān)代碼在地址，https://github.com/mvpzx/elapse/tree/master/be/src/components

標(biāo)題名稱：Vue組件開發(fā)技巧總結(jié)
標(biāo)題網(wǎng)址：http://muchs.cn/article22/pihgjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)、商城網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容