vue自定义气泡弹窗

本文实例为大家分享了vue自定义气泡弹窗的具体代码，供大家参考，具体内容如下

src/components/myComponents/pop/pop.vue

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','签到成功！')

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