vue自定義氣泡彈窗
本文實例為大家分享了vue自定義氣泡彈窗的具體代碼,供大家參考,具體內(nèi)容如下
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) ? ? // 添加實例方法,以供全局進(jìn)行調(diào)用 ? ? 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)
使用
第一個參數(shù)為動畫樣式名稱——傳空字符串時無晃動動畫(可以修改pop.vue,添加更多動畫效果)
第二參數(shù)為顯示的信息this.$pop('shake','簽到成功!')
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11Vue使用extend動態(tài)創(chuàng)建組件的實現(xiàn)
本文主要介紹了Vue使用extend動態(tài)創(chuàng)建組件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue使用formData時候傳遞參數(shù)是個空值的情況處理
這篇文章主要介紹了vue使用formData時候傳遞參數(shù)是個空值的情況處理,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05