vue项目自定义提示框


<template><div :visible&＃61;"visible" ref&＃61;"tipsBox" &＃64;update:visible&＃61;"updateDialog" class&＃61;"tipsBox"><div ref&＃61;"showPopover" class&＃61;"tipsClass animated"><div>{{tipsContent}}div>div>div>
template>
<script>
export default {props: {visible: Boolean,tipsContent: String},methods: {get() {if (this.visible) {this.$refs.tipsBox.children[0].className &＃61; "tipsClass";this.updateDialog(false);} else {this.$refs.tipsBox.children[0].className &＃61; "tipsClass animated";}},updateDialog(val) {this.$emit("update:visible", val);}},mounted() {this.timer &＃61; setInterval(this.get, 1000);},beforeDestroy() {clearInterval(this.timer);}
};
script>
<style lang&＃61;"scss" scoped>
.tipsClass {top: 60%;left: 50%;height: 30px;line-height: 30px;position: absolute;padding: 0 15px;background: black;font-size: 12px;margin: 0px auto;text-align: center;color: white;opacity: 1;transform: translate(-50%, -50%);border-radius: 3px;
}
.animated {opacity: 0;padding: 0;filter: Alpha(opacity&＃61;0);transition: all 2s;
}
style>



<template><div class&＃61;"short-message-signature"><el-button type&＃61;"primary" &＃64;click&＃61;"submit">提交el-button><BombTips v-bind.sync&＃61;"showBombTips" :tipsContent&＃61;"tipsContent">BombTips>div>
template>
<script>
import BombTips from "&＃64;/components/common/BombTips.vue";
export default {components: { BombTips },data() {return {showBombTips: {visible: false},tipsContent: ""};},methods: {submit() {this.showBombTips &＃61; {visible: true};this.tipsContent &＃61; "测试弹框的内容";},}
};
script>


效果如下&＃xff1a;