欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue自定義氣泡彈窗

 更新時間:2022年08月30日 09:54:00   作者:朝陽39  
這篇文章主要為大家詳細(xì)介紹了vue自定義氣泡彈窗,包含css晃動動畫shake制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了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)文章

  • mint-ui如何自定義messageBox樣式

    mint-ui如何自定義messageBox樣式

    這篇文章主要介紹了mint-ui如何自定義messageBox樣式問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解

    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-11
  • Vant的安裝和配合引入Vue.js項目里的方法步驟

    Vant的安裝和配合引入Vue.js項目里的方法步驟

    這篇文章主要介紹了Vant的安裝和配合引入Vue.js項目里的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue3封裝輪播圖組件的方法

    vue3封裝輪播圖組件的方法

    這篇文章主要為大家詳細(xì)介紹了vue3封裝輪播圖組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue將html頁面生成高清晰pdf文件的方法

    vue將html頁面生成高清晰pdf文件的方法

    最近工作中遇到個需求,需要實現(xiàn)個可視化圖表頁的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • Vue使用extend動態(tài)創(chuàng)建組件的實現(xiàn)

    Vue使用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-04
  • 詳解Vue 動態(tài)添加模板的幾種方法

    詳解Vue 動態(tài)添加模板的幾種方法

    本篇文章主要介紹了詳解Vue 動態(tài)添加模板的幾種方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼

    element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼

    這篇文章主要介紹了element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決

    vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決

    今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue使用formData時候傳遞參數(shù)是個空值的情況處理

    vue使用formData時候傳遞參數(shù)是個空值的情況處理

    這篇文章主要介紹了vue使用formData時候傳遞參數(shù)是個空值的情況處理,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05

最新評論