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

最簡(jiǎn)單的vue消息提示全局組件的方法

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

簡(jiǎn)介

實(shí)現(xiàn)功能

  • 自定義文本
  • 自定義類型(默認(rèn),消息,成功,警告,危險(xiǎn))
  • 自定義過(guò)渡時(shí)間

使用vue-cli3.0生成項(xiàng)目

toast全局組件編寫(xiě)

/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)造出一個(gè) vue組件實(shí)例
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é)點(diǎn)
 document.body.appendChild(toastDom.$el)
 // 過(guò)渡時(shí)間
 setTimeout(() => {
  toastDom.isShow = false
 }, duration)
}
// 全局注冊(cè)
function registryToast () {
 vue.prototype.$toast = showToast
}

export default registryToast

全局注冊(cè)

/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>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

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

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

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

    Vue中對(duì)iframe實(shí)現(xiàn)keep alive無(wú)刷新的方法

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

    vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決

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

    iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼

    這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼

    Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼

    本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明

    vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明

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

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

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

    vue component組件使用方法詳解

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

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

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

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

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

最新評(píng)論