欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目中封裝組件的簡單步驟記錄

 更新時間:2021年09月28日 09:07:23   作者:青蓮使者  
眾所周知組件(component)是vue.js最強(qiáng)大的功能之一,它可以實(shí)現(xiàn)功能的復(fù)用,以及對其他邏輯的解耦,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中封裝組件的相關(guān)資料,需要的朋友可以參考下

前言

隨著業(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)勾選方式

    這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue el-date-picker動態(tài)限制時間范圍案例詳解

    vue el-date-picker動態(tài)限制時間范圍案例詳解

    這篇文章主要介紹了vue el-date-picker動態(tài)限制時間范圍案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • VUE中Non-Props屬性的使用

    VUE中Non-Props屬性的使用

    本文主要介紹了VUE中Non-Props屬性的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • vue實(shí)現(xiàn)單點(diǎn)登錄的方式匯總

    vue實(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-11
  • vue的無縫滾動組件vue-seamless-scroll實(shí)例

    vue的無縫滾動組件vue-seamless-scroll實(shí)例

    本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法,需要的朋友參考學(xué)習(xí)下吧。
    2017-12-12
  • vue elementui form表單驗(yàn)證的實(shí)現(xiàn)

    vue elementui form表單驗(yàn)證的實(shí)現(xiàn)

    這篇文章主要介紹了vue elementui form表單驗(yàn)證的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • Vue和uniapp中該如何使用canvas詳解

    Vue和uniapp中該如何使用canvas詳解

    說起canvas是css3新增的標(biāo)簽,而餅狀圖又是canvas經(jīng)典,我們公司現(xiàn)在正在用uni-app框架去研發(fā)APP,下面這篇文章主要給大家介紹了關(guān)于Vue和uniapp中該如何使用canvas的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • Vue3實(shí)現(xiàn)SSE(Server-Sent?Events)連接

    Vue3實(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
  • vue移動端判斷手指在屏幕滑動方向

    vue移動端判斷手指在屏幕滑動方向

    這篇文章主要為大家詳細(xì)介紹了vue移動端判斷手指在屏幕滑動方向,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • Vue的基本知識你都了解嗎

    Vue的基本知識你都了解嗎

    這篇文章主要為大家詳細(xì)介紹了Vue的基本知識,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02

最新評論