vue自定义气泡弹窗

本文实例为大家分享了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自定义气泡弹窗的详细内容...