vue自定义气泡弹窗

这篇文章主要为大家详细介绍了vue自定义气泡弹窗，包含css晃动动画shake制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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)
    // 添加实例方法，以供全局进行调用
    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)

使用

第一个参数为动画样式名称——传空字符串时无晃动动画（可以修改pop.vue，添加更多动画效果）
第二参数为显示的信息
this.$pop('shake','签到成功！')

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• 使用Vue组件实现一个简单弹窗效果
• 关于vue.js弹窗组件的知识点总结
• vue实现点击按钮“查看详情”弹窗展示详情列表操作
• 很棒的vue弹窗组件
• vue弹窗消息组件的使用方法
• vue中实现点击空白区域关闭弹窗的两种方法
• VUE实现可随意拖动的弹窗组件
• Vue中关闭弹窗组件时销毁并隐藏操作
• vue的toast弹窗组件实例详解
• vue 实现一个简单的全局调用弹窗案例