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

最簡單的vue消息提示全局組件的方法

 更新時間:2019年06月16日 11:28:35   作者:渣渣輝  
這篇文章主要介紹了最簡單的vue消息提示全局組件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

簡介

實現(xiàn)功能

  • 自定義文本
  • 自定義類型(默認,消息,成功,警告,危險)
  • 自定義過渡時間

使用vue-cli3.0生成項目

toast全局組件編寫

/src/toast/toast.vue

<template>
 <div class="app-toast"
    v-if="isShow"
    :class="{'info': type=== 'info','success': type=== 'success','wraning': type=== 'wraning','danger': type=== 'danger'}">{{text}}</div>
</template>
<style scoped>
.app-toast {
 position: fixed;
 left: 50%;
 top: 50%;
 background: #ccc;
 padding: 10px;
 border-radius: 5px;
 transform: translate(-50%, -50%);
 color: #fff;
}
.info {
 background: #00aaee;
}
.success {
 background: #00ee6b;
}
.wraning {
 background: #eea300;
}
.danger {
 background: #ee000c;
}
</style>

/src/toast/index.js

import vue from 'vue'
import toastComponent from './toast.vue'

// 組件構(gòu)造器,構(gòu)造出一個 vue組件實例
const ToastConstructor = vue.extend(toastComponent)

function showToast ({ text, type, duration = 2000 }) {
 const toastDom = new ToastConstructor({
  el: document.createElement('div'),
  data () {
   return {
    isShow: true, // 是否顯示
    text: text, // 文本內(nèi)容
    type: type // 類型
   }
  }
 })
 // 添加節(jié)點
 document.body.appendChild(toastDom.$el)
 // 過渡時間
 setTimeout(() => {
  toastDom.isShow = false
 }, duration)
}
// 全局注冊
function registryToast () {
 vue.prototype.$toast = showToast
}

export default registryToast

全局注冊

/main.js

import toastRegistry from './toast/index'
Vue.use(toastRegistry)

調(diào)用

/src/views/home.vue

<template>
 <div class="home">
  <input type="button"
      value="顯示彈窗"
      @click="showToast">
 </div>
</template>

<script>

export default {
 name: 'home',
 methods: {
  showToast () {
   this.$toast({
    text: '我是消息'
    // type: 'wraning',
    // duration: 3000
   })
  }
 }
}
</script>

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3+vite引入插件unplugin-auto-import的方法

    vue3+vite引入插件unplugin-auto-import的方法

    這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值?,需要的朋友可以參考下
    2022-10-10
  • Vue中對iframe實現(xiàn)keep alive無刷新的方法

    Vue中對iframe實現(xiàn)keep alive無刷新的方法

    這篇文章主要介紹了Vue中對iframe實現(xiàn)keep alive無刷新的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-07-07
  • vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決辦法

    vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決

    最近開發(fā)中遇到了些問題,跟大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決辦法,需要的朋友可以參考下
    2023-01-01
  • iview tabs 頂部導航欄和模塊切換欄的示例代碼

    iview tabs 頂部導航欄和模塊切換欄的示例代碼

    這篇文章主要介紹了iview tabs 頂部導航欄和模塊切換欄的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • Vue3封裝ElImageViewer預覽圖片的示例代碼

    Vue3封裝ElImageViewer預覽圖片的示例代碼

    本文主要介紹了Vue3封裝ElImageViewer預覽圖片的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • vue3使用echart的兩種引入方式以及注意事項說明

    vue3使用echart的兩種引入方式以及注意事項說明

    這篇文章主要介紹了vue3使用echart的兩種引入方式以及注意事項說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue3監(jiān)聽屬性與Computed的區(qū)別詳解

    Vue3監(jiān)聽屬性與Computed的區(qū)別詳解

    在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應數(shù)據(jù)的變化,但在使用場景和原理上存在明顯的區(qū)別,本文將詳細解析 Vue 3 中監(jiān)聽屬性 (watch) 和計算屬性 (computed) 的區(qū)別,需要的朋友可以參考下
    2024-02-02
  • vue component組件使用方法詳解

    vue component組件使用方法詳解

    這篇文章主要為大家詳細介紹了vue component組件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • Vue.js組件實現(xiàn)選項卡以及切換特效

    Vue.js組件實現(xiàn)選項卡以及切換特效

    這篇文章主要為大家詳細介紹了Vue.js組件實現(xiàn)選項卡以及切換特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • vue.js輪播圖組件使用方法詳解

    vue.js輪播圖組件使用方法詳解

    這篇文章主要為大家詳細介紹了vue.js輪播圖組件使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07

最新評論