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

Zoom 發布于2019-08-23 18:07 / 2429人閱讀

摘要：簡介實現功能自定義文本自定義類型默認，消息，成功，警告，危險自定義過渡時間使用生成項目實際效果全局組件編寫組件構造器，構造出一個組件實例是否顯示文本內容類型添加節點過渡時間全局注冊全局注冊調用顯示彈窗我是消息

簡介

實現功能

自定義文本

自定義類型(默認，消息，成功，警告，危險)

自定義過渡時間

使用vue-cli3.0生成項目

實際效果

toast全局組件編寫 /src/toast/toast.vue

/src/toast/index.js

import vue from "vue"
import toastComponent from "./toast.vue"

// 組件構造器，構造出一個 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, // 文本內容
        type: type // 類型
      }
    }
  })
  // 添加節點
  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)

調用

/src/views/home.vue

GPU云服務器云服務器簡單的js提示框 vue組件 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104718.html

封裝Vue組件的一些技巧

摘要：根據組件單向數據流和和事件通信機制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數據，完成狀態的更新。本文同步在個人博客shymean.com上，歡迎關注寫Vue有很長一段時間了，除了常規的業務開發之外，也應該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實現是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業務代碼里面會充斥著冗余的彈...

韓冰 2019-05-23 17:35 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

linkin 2019-08-02 15:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

shadowbook 2019-08-23 18:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

NicolasHe 2019-08-30 11:18 評論0 收藏0