vue自定义气泡弹窗

本文实例为大家分享了vue自定义气泡弹窗的具体代码，供大家参考，具体内容如下src/components/myComponents/pop/pop.vuetemplatedivclass=t...

本文实例为大家分享了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%,
    8http://www.cppcns.com0% {
      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/myCompYFvGIsbjdonents/pop/index.js

import PopComponent from './pop.vue'

const Pop = {}
Pop.install = (Vue) => {
  // 注册pop组件
  const PopConstructor = Vue.extend(PopComponent)
  const instance = new PopConstructor()
  instance.$mountwww.cppcns.com(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','签到成功！')

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