vue如何自定義氣泡彈窗

這篇“vue如何自定義氣泡彈窗”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue如何自定義氣泡彈窗”文章吧。

src/components/myComponents/pop/pop.vue

<template>
    <div class="tips animation" :class="{'shake': type === 'shake'}" v-show="isShow" ref="tips">
        <div class="content">{{msg}}</div>
    </div>
</template>
<script>
    export default {
        name: 'Pop',
        props: {
            type: {
                type: String,
                default: ''
            },
            msg: {
                type: String,
                default: ''
            },
            isShow: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            isShow(newval, oldval) {
                if (newval !== oldval && newval === true) {
                    // 顯示pop組件
                    setTimeout(() => {
                        let height = this.$refs.tips.clientHeight
                        let width = this.$refs.tips.clientWidth
                        this.$refs.tips.style.marginLeft = -width / 2 + 'px'
                        this.$refs.tips.style.marginTop = -height / 2 + 'px'
                    }, 0)
                    setTimeout(() => {
                        this.isShow = false
                        this.msg = ''
                        this.type = ''
                    }, 3000)
                }
            }
        }
    }
</script>
<style scoped>
    @keyframes shake {
        0%,
        100% {
            transform: translateX(0);
        }
 
        10%,
        30%,
        50%,
        70%,
        90% {
            transform: translateX(-10px);
        }
 
        20%,
        40%,
        60%,
        80% {
            transform: translateX(10px);
        }
    }
 
    .tips {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 2000;
    }
 
    .animation {
        animation-fill-mode: both;
        animation-duration: 0.3s;
    }
 
    .content {
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        padding: 10px 15px;
        border-radius: 6px;
    }
 
    .shake {
        animation-name: shake;
    }
</style>

src/components/myComponents/pop/index.js

import PopComponent from './pop.vue'
 
const Pop = {}
Pop.install = (Vue) => {
    // 注冊pop組件
    const PopConstructor = Vue.extend(PopComponent)
    const instance = new PopConstructor()
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    // 添加實例方法，以供全局進行調(diào)用
    Vue.prototype.$pop = (type, msg) => {
        instance.type = type
        instance.msg = msg
        instance.isShow = true
    }
}
export default Pop

src/main.js

import Pop from '@/components/myComponents/pop'
Vue.use(Pop)

使用

第一個參數(shù)為動畫樣式名稱——傳空字符串時無晃動動畫（可以修改pop.vue，添加更多動畫效果）
第二參數(shù)為顯示的信息
this.$pop('shake','簽到成功！')

以上就是關(guān)于“vue如何自定義氣泡彈窗”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。