Vue專案中封裝元件的簡單步驟記錄
阿新 • • 發佈：2021-09-29
目錄
- 前言
- 如何封裝一個Toast元件
- 使用案例
- 具體實現
- 總結
前言
隨著業務的發展 功能性開發 已經無法滿足我們對於前端的需求，這一篇主要帶大家體驗一下如何開發一套屬於自己的元件庫
使用場景：公司內部元件庫的開發，個人組件庫的開發，與專案解耦，多專案中使用同一組件，只需維護一套元件庫
如何封裝一個Toast元件
元件說明：
實現提示功能。
效果展示：
實現的功能：
- 根據某個判斷條件或者點選某個按鈕，彈出彈框；
- 可配置位置，型別，樣式名等
使用案例
1. 簡單使用
vm.$toast('網路異常！')
2. 使用options引數
* message 提示資訊內容
* duration 停留時間，單位為毫秒
* position 顯示位置：top、middle、bottom
* className 樣式名稱
vm.$toast({
message: '網路異常！',duration: 2000,position: 'middle',className: 'big'
})
3. 錯誤提示
vm.$toast({
message: '驗證碼錯誤！',type: 'error'
})
具體實現
首先toast.
<template>
<transition name="toast-pop">
<div v-show="visible" class="toast" :class="customClass" @click="handleClose">
<span class="text">{{message}}</span>
</div>
</transition>
</template>
<script>
export default {
name: 'Toast',props: {
message: String,// 提示資訊內容
className: { // 樣式名
type: String,default: ''
},position: { // 位置：top、middle、bottom
type: String,default: 'middle'
},type: { // 提示型別：normal、error
type: String,defalut: 'normal'
}
},data () {
return {
// 是否顯示
visible: false
}
},computed: {
// 獲取樣式
customClass () {
let classes = []
classes.push('toast-' + this.type)
switch (this.positon) {
case 'top':
classes.push('is-placetop')
break
case 'bottom':
classes.push('is-placebottom')
break
default:
classes.push('is-placemiddle')
}
this.className && classes.push(this.className)
return classes
}
},methods: {
handleClose () {
this.$emit('close')
}
}
}
</script>
<style lwww.cppcns.com
toastPlugin.
import Vue from 'vue'
import Toast from './toast.vue'
// toast建構函式
const ToastConstructor = Vue.extend({
extends: Toast
})
// toast例項池
let toastPool = []
/** 獲取toast例項（例項池中有從池中取，沒有則新建） */
let getInstance = () => {
// console.log('toastPool:',toastPool)
if (toastPool.length > 0) {
return toastPool.shift()
}
return new ToastConstructor({
el: docume客棧nt.createElement('div')
})
}
/** 歸還例項到例項池 */
let returnInstance = instance => {
if (instance) {
toastPool.push(instance)
// console.log('歸還例項:',instance,toastPool)
}
}
/** 文件中移除toast的DOM節點 */
function removeDom (event) {
if (event.target.parentNode) {
event.target.parentNode.removeChild(event.target)
}
}
// 關閉
ToastConstructor.prototype.close = function () {
this.visible = false // 不可見
this.closed = true // 關閉狀態
this.$el.addEventListener('transitionend',removeDom) // 動畫完成後移除DOM節點
returnInstance(this) // 例項物件歸還到例項池，例項可以重複利用
}
// 顯示toast提示資訊
export default function (options = {}) {
// 顯示時間，預設3秒
let duration = options.duration || 3000
let instance = getInstance()
// console.log('instance=',instance)
// 顯示型別
instance.type = options.type || 'normal'
// 顯示內容
instance.message = typeof options === 'string' ? options : options.message
// 顯示位置：top、middle、bottom
instance.position = options.position || 'middle'
instance.className = options.className || ''
// 移除動畫完成事件
instance.$el.removeEventListener('transitionend',removeDom)
instance.$on('close',() => {
instance.close()
})
// console.log('instance.$el=',instance.$el)
// 將節點新增到文件
document.body.appendChild(instance.$el)
instance.visible = true
instance.closed = false
// 清除定時器
instance.timer && clearTimeout(instance.timer)
// 設定定時器，關閉toast
instance.timer = setTimeout(() => {
// console.log('關閉',instance)
!instance.closed && instance.close()
instance.timer = null
},duration)
}
main.js
import ToastPlugin from './plugins/toastPlugin.js' // toast提示資訊外掛 Vue.use(ToastPlugin)
總結
到此這篇關於Vue專案中封裝元件的文章就介紹到這了,更多相關Vue專案封裝元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！