Vue項(xiàng)目中封裝組件的簡單步驟記錄
前言
隨著業(yè)務(wù)的發(fā)展 功能性開發(fā) 已經(jīng)無法滿足我們對于前端的需求,這一篇主要帶大家體驗(yàn)一下如何開發(fā)一套屬于自己的組件庫
使用場景:公司內(nèi)部組件庫的開發(fā),個人組件庫的開發(fā),與項(xiàng)目解耦,多項(xiàng)目中使用同一組件,只需維護(hù)一套組件庫
如何封裝一個Toast組件
組件說明:
實(shí)現(xiàn)提示功能。
效果展示:
實(shí)現(xiàn)的功能:
- 根據(jù)某個判斷條件或者點(diǎn)擊某個按鈕,彈出彈框;
- 可配置位置,類型,樣式名等
使用案例
1. 簡單使用
vm.$toast('網(wǎng)絡(luò)異常!')
2. 使用options參數(shù)
* message 提示信息內(nèi)容 * duration 停留時間,單位為毫秒 * position 顯示位置:top、middle、bottom * className 樣式名稱 vm.$toast({ message: '網(wǎng)絡(luò)異常!', duration: 2000, position: 'middle', className: 'big' })
3. 錯誤提示
vm.$toast({ message: '驗(yàn)證碼錯誤!', duration: 2000, type: 'error' })
具體實(shí)現(xiàn)
首先toast.vue
<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, // 提示信息內(nèi)容 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 lang="scss" scoped px2rem="false"> .toast { position: fixed; box-sizing: border-box; min-width: 200px; max-width: 50%; max-height: 85%; margin-top: 0; padding: 18px 30px; border-radius: 10px; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; overflow-y: auto; z-index: 2000; .text { display: block; font-size: 16px; line-height: 1.5; text-align: center; word-wrap: break-word; } } .is-placetop { top: 50px; left: 50%; transform: translate(-50%, 0); } .is-placemiddle { top: 50%; left: 50%; transform: translate(-50%, -50%); } .is-placebottom { bottom: 50px; left: 50%; transform: translate(-50%, 0); } .is-placetop.toast-pop-enter-active, .is-placetop.toast-pop-leave-active, .is-placemiddle.toast-pop-enter-active, .is-placemiddle.toast-pop-leave-active { transition: opacity .3s linear, margin-top .3s ease; } .is-placetop.toast-pop-enter, .is-placetop.toast-pop-leave-to, .is-placemiddle.toast-pop-enter, .is-placemiddle.toast-pop-leave-to { margin-top: 30px; opacity: 0; } .is-placebottom.toast-pop-enter-active, .is-placebottom.toast-pop-leave-active { transition: opacity .3s linear, margin-bottom .3s ease; } .is-placebottom.toast-pop-enter, .is-placebottom.toast-pop-leave-to { margin-bottom: -30px; opacity: 0; } .toast-error { background: rgba(255,102,104,.9); } </style>
toastPlugin.js
import Vue from 'vue' import Toast from './toast.vue' // toast構(gòu)造函數(shù) const ToastConstructor = Vue.extend({ extends: Toast }) // toast實(shí)例池 let toastPool = [] /** 獲取toast實(shí)例(實(shí)例池中有從池中取,沒有則新建) */ let getInstance = () => { // console.log('toastPool:', toastPool) if (toastPool.length > 0) { return toastPool.shift() } return new ToastConstructor({ el: document.createElement('div') }) } /** 歸還實(shí)例到實(shí)例池 */ let returnInstance = instance => { if (instance) { toastPool.push(instance) // console.log('歸還實(shí)例:', instance, toastPool) } } /** 文檔中移除toast的DOM節(jié)點(diǎn) */ function removeDom (event) { if (event.target.parentNode) { event.target.parentNode.removeChild(event.target) } } // 關(guān)閉 ToastConstructor.prototype.close = function () { this.visible = false // 不可見 this.closed = true // 關(guān)閉狀態(tài) this.$el.addEventListener('transitionend', removeDom) // 動畫完成后移除DOM節(jié)點(diǎn) returnInstance(this) // 實(shí)例對象歸還到實(shí)例池,實(shí)例可以重復(fù)利用 } // 顯示toast提示信息 export default function (options = {}) { // 顯示時間,默認(rèn)3秒 let duration = options.duration || 3000 let instance = getInstance() // console.log('instance=', instance) // 顯示類型 instance.type = options.type || 'normal' // 顯示內(nèi)容 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) // 將節(jié)點(diǎn)添加到文檔 document.body.appendChild(instance.$el) instance.visible = true instance.closed = false // 清除定時器 instance.timer && clearTimeout(instance.timer) // 設(shè)置定時器,關(guān)閉toast instance.timer = setTimeout(() => { // console.log('關(guān)閉', instance) !instance.closed && instance.close() instance.timer = null }, duration) }
main.js
import ToastPlugin from './plugins/toastPlugin.js' // toast提示信息插件 Vue.use(ToastPlugin)
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目中封裝組件的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目封裝組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04vue el-date-picker動態(tài)限制時間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動態(tài)限制時間范圍案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09vue實(shí)現(xiàn)單點(diǎn)登錄的方式匯總
最近項(xiàng)目停工了,RageFrame的學(xué)習(xí)暫時告一段落,這一篇給大家分享下有關(guān)單點(diǎn)登錄的相關(guān)知識,并提供一些demo給大家參考,對vue單點(diǎn)登錄的實(shí)現(xiàn)方式感興趣的朋友一起看看吧2021-11-11vue的無縫滾動組件vue-seamless-scroll實(shí)例
本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法,需要的朋友參考學(xué)習(xí)下吧。2017-12-12vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue elementui form表單驗(yàn)證的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11Vue3實(shí)現(xiàn)SSE(Server-Sent?Events)連接
SSE?是一種允許服務(wù)器向?yàn)g覽器推送事件的技術(shù),這篇文章主要為大家詳細(xì)介紹了如何通過vue3實(shí)現(xiàn)SSE(Server-Sent?Events)連接,有需要的小伙伴可以了解下2024-10-10