vue自定義氣泡彈窗
更新時間：2022年08月30日 09:54:00 作者：朝陽39
這篇文章主要為大家詳細介紹了vue自定義氣泡彈窗，包含css晃動動畫shake制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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)
? ? // 添加實例方法，以供全局進行調(diào)用
? ? Vue.prototype.$pop = (type, msg) => {
? ? ? ? instance.type = type
? ? ? ? instance.msg = msg
? ? ? ? instance.isShow = true
? ? }
}
export default Popsrc/main.js
import Pop from '@/components/myComponents/pop' Vue.use(Pop)
使用
第一個參數(shù)為動畫樣式名稱——傳空字符串時無晃動動畫（可以修改pop.vue，添加更多動畫效果）
第二參數(shù)為顯示的信息this.$pop('shake','簽到成功！')
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue3必學(xué)技巧-自定義Hooks-讓寫Vue3更暢快示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了requirejs + vue 項目搭建詳解,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
vue3中實現(xiàn)文本顯示省略號和tooltips提示框的方式詳解
在?B?端業(yè)務(wù)中,我們經(jīng)常會遇到文本內(nèi)容超出容器區(qū)域需顯示省略號的需求,當(dāng)鼠標(biāo)移入文本時,會出現(xiàn)?Tooltip?顯示完整內(nèi)容,最近,我也遇到了這樣的場景,接下來給大家介紹vue3中實現(xiàn)文本顯示省略號和tooltips提示框的方式,需要的朋友可以參考下2024-04-04
下面小編就為大家分享一篇Axios 常用的請求方法別名，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在國內(nèi)安裝node-sass常因無法穩(wěn)定連接GitHub而失敗,解決方法包括手動下載對應(yīng)的binding.node文件并放入緩存目錄,操作步驟詳細,適合非Python用戶,無需額外環(huán)境配置2024-10-10
今天想要給vite項目,添加全局的scss變量文件引用,這樣我們在使用scss變量和函數(shù)的時候就不需要每個組件都取引用了,下面這篇文章主要給大家介紹了關(guān)于如何在vite初始化項目中安裝scss以及scss使用的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue項目通過a標(biāo)簽下載圖片至zip包的示例代碼
在vue項目中,將圖片下載可使用流的形式,下載成單個圖片,或者將多個圖片下載至zip包,本文就是介紹使用a標(biāo)簽下載圖片的用法,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-10-10
Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問題
這篇文章主要介紹了Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實現(xiàn)樹懶加載的過程，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10