Vue項(xiàng)目中封裝組件的簡單步驟記錄
更新時(shí)間：2021年09月28日 09:07:23 作者：青蓮使者
眾所周知組件(component)是vue.js最強(qiáng)大的功能之一,它可以實(shí)現(xiàn)功能的復(fù)用,以及對(duì)其他邏輯的解耦,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中封裝組件的相關(guān)資料,需要的朋友可以參考下
前言
隨著業(yè)務(wù)的發(fā)展 功能性開發(fā) 已經(jīng)無法滿足我們對(duì)于前端的需求，這一篇主要帶大家體驗(yàn)一下如何開發(fā)一套屬于自己的組件庫
使用場(chǎng)景：公司內(nèi)部組件庫的開發(fā)，個(gè)人組件庫的開發(fā)，與項(xiàng)目解耦，多項(xiàng)目中使用同一組件，只需維護(hù)一套組件庫
如何封裝一個(gè)Toast組件
組件說明：
實(shí)現(xiàn)提示功能。
效果展示：
實(shí)現(xiàn)的功能：
- 根據(jù)某個(gè)判斷條件或者點(diǎn)擊某個(gè)按鈕，彈出彈框；
- 可配置位置，類型，樣式名等
使用案例
1. 簡單使用
vm.$toast('網(wǎng)絡(luò)異常！')
2. 使用options參數(shù)
* message 提示信息內(nèi)容
* duration 停留時(shí)間，單位為毫秒
* position 顯示位置：top、middle、bottom
* className 樣式名稱
vm.$toast({
message: '網(wǎng)絡(luò)異常！',
duration: 2000,
position: 'middle',
className: 'big'
})
3. 錯(cuò)誤提示
vm.$toast({
message: '驗(yàn)證碼錯(cuò)誤！',
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) // 動(dòng)畫完成后移除DOM節(jié)點(diǎn)
returnInstance(this) // 實(shí)例對(duì)象歸還到實(shí)例池，實(shí)例可以重復(fù)利用
}
// 顯示toast提示信息
export default function (options = {}) {
// 顯示時(shí)間，默認(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 || ''
// 移除動(dòng)畫完成事件
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
// 清除定時(shí)器
instance.timer && clearTimeout(instance.timer)
// 設(shè)置定時(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue?遮罩和ref的使用，setup版和非setup版,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
在遇到chunk-vendors.js文件的語法錯(cuò)誤時(shí),可以嘗試在vue.config.js文件中添加transpileDependencies參數(shù)進(jìn)行配置,這通過明確指示哪些依賴需要被babel轉(zhuǎn)譯,從而幫助解決編譯過程中的語法問題,此方法適用于Vue項(xiàng)目中遇到的相關(guān)錯(cuò)誤,希望能幫助到遇到同樣問題的開發(fā)者2024-10-10
用Vue.js實(shí)現(xiàn)監(jiān)聽屬性的變化
響應(yīng)系統(tǒng)是Vue.js的一個(gè)顯著功能，修改屬性，可以更新視圖，這讓狀態(tài)管理變得非常簡單且直觀。這篇文章主要給大家介紹如何利用Vue.js實(shí)現(xiàn)觀察屬性的變化，有需要的朋友們可以參考借鑒，感興趣的朋友們下面來一起看看吧。2016-11-11
vue3中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法是就是使用ref和reactive,所謂響應(yīng)式就是界面和數(shù)據(jù)同步,能實(shí)現(xiàn)實(shí)時(shí)更新,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref和reactive的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)打地鼠小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue中使用vux配置的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼,通過實(shí)例代碼介紹了父頁面引用的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue?css?相對(duì)路徑導(dǎo)入問題級(jí)踩坑記錄
這篇文章主要介紹了vue?css?相對(duì)路徑導(dǎo)入問題級(jí)踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決
這篇文章主要介紹了vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04