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','签到成功！')
相关文章
Claire
2021-05-21
Judy
2023-07-20
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20