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','簽到成功!')
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。