Vue項目中封裝組件的簡單步驟記錄
前言
隨著業(yè)務的發(fā)展 功能性開發(fā) 已經無法滿足我們對于前端的需求,這一篇主要帶大家體驗一下如何開發(fā)一套屬于自己的組件庫
使用場景:公司內部組件庫的開發(fā),個人組件庫的開發(fā),與項目解耦,多項目中使用同一組件,只需維護一套組件庫
如何封裝一個Toast組件
組件說明:
實現(xiàn)提示功能。
效果展示:
實現(xiàn)的功能:
- 根據某個判斷條件或者點擊某個按鈕,彈出彈框;
- 可配置位置,類型,樣式名等
使用案例
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: '驗證碼錯誤!', duration: 2000, type: 'error' })
具體實現(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, // 提示信息內容 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構造函數 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: document.createElement('div') }) } /** 歸還實例到實例池 */ let returnInstance = instance => { if (instance) { toastPool.push(instance) // console.log('歸還實例:', instance, toastPool) } } /** 文檔中移除toast的DOM節(jié)點 */ function removeDom (event) { if (event.target.parentNode) { event.target.parentNode.removeChild(event.target) } } // 關閉 ToastConstructor.prototype.close = function () { this.visible = false // 不可見 this.closed = true // 關閉狀態(tài) this.$el.addEventListener('transitionend', removeDom) // 動畫完成后移除DOM節(jié)點 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) // 將節(jié)點添加到文檔 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項目封裝組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue el-date-picker動態(tài)限制時間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動態(tài)限制時間范圍案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09vue的無縫滾動組件vue-seamless-scroll實例
本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法,需要的朋友參考學習下吧。2017-12-12vue elementui form表單驗證的實現(xiàn)
這篇文章主要介紹了vue elementui form表單驗證的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11Vue3實現(xiàn)SSE(Server-Sent?Events)連接
SSE?是一種允許服務器向瀏覽器推送事件的技術,這篇文章主要為大家詳細介紹了如何通過vue3實現(xiàn)SSE(Server-Sent?Events)連接,有需要的小伙伴可以了解下2024-10-10