VUE2——事件驅動彈窗

MobService 發布于2019-08-01 17:50 / 3096人閱讀

摘要：前幾天想了解如何寫彈窗組件，參考了知乎上的回答有以下兩種可取的寫法狀態管理如果彈窗組件放在根組件，使用來管理組件的和。

前幾天想了解vue如何寫彈窗組件，參考了知乎上的回答：
https://www.zhihu.com/questio...
有以下兩種可取的寫法：
1.狀態管理如果彈窗組件放在根組件，使用vuex來管理組件的show和hide。放在組件內，通過增加v-show或v-if來控制，可結合slot，定義不同需求的彈窗
2.事件管理注冊一個全局事件來打開彈窗，傳入需展示的文字和相關的邏輯控制，可結合promise，實現異步

覺得對用像confirme和propmt這類彈窗，還是事件驅動的好。最好就是能使用promise回調。
于是手癢就寫了一個。下面是代碼。
propmt.js

import Vue from "vue"
import promptComponent from  "./prompt.vue" // 引入彈窗的vue文件
const promptConstructor = Vue.extend(promptComponent); // 注冊組件
let instance = new promptConstructor().$mount(""); // 獲得組件的實例

document.body.appendChild(instance.$el); // 將組件的element插入到body中
const Alert = (text,okText)=>{
    if(instance.show === true) { //防止多次觸發
        return;
    }
    // 為彈窗數據賦值
    instance.show = true; 
    instance.isAlert = true;
    instance.okText = okText||"確定";
    instance.message = text;
    //返回一個promise對象，并為按鈕添加事件監聽
    return new Promise(function(resolve,reject) {
        instance.$refs.okBtn.addEventListener("click",function() {
            instance.show = false;
            resolve(true);
        })
    })
};
const Confirm = (text,okText,cancelText)=>{
    if(instance.show === true) {
        return;
    }
    instance.show = true;
    instance.okText = okText||"確定";
    instance.cancelText = cancelText||"取消";
    instance.message = text;
    return new Promise(function(resolve,reject) {
        instance.$refs.cancelBtn.addEventListener("click",function() {
            instance.show = false;
            resolve(false);
        });
        instance.$refs.okBtn.addEventListener("click",function() {
            instance.show = false;
            resolve(true);
        })
    })
};
const Prompt = (text,okText,inputType, defaultValue)=>{
    if(instance.show === true) {
        return;
    }
    instance.show = true;
    instance.isPrompt = true;
    instance.okText = okText||"確定";
    instance.message = text;
    instance.inputType = inputType || "text";
    instance.inputValue = defaultValue || "";
    return new Promise(function(resolve,reject) {
        instance.$refs.okBtn.addEventListener("click",function() {
            instance.show = false;
            resolve(instance.inputValue);
        })
    })
};

export {Alert,Confirm,Prompt}

prompt.vue

main.js

import {Alert,Prompt,Confirm} from "../lib/components/prompt/prompt.js"

Vue.prototype.Alert = function(text,okText) {
    return Alert(text,okText)
};
Vue.prototype.Confirm = function(text,okText,cancelText) {
    return Confirm(text,okText,cancelText)
};
Vue.prototype.Prompt = function(text,okText,inputType, defaultValue) {
    return Prompt(text,okText,inputType, defaultValue)
};

component.vue:

inputName() {
    this.Prompt("請輸入名稱","確認","text").then(res =>{
       // do something use res
    });
},

云服務器 GPU云服務器事件驅動事件驅動模型事件驅動型 python事件驅動

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

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

VUE2——事件驅動彈窗

摘要：前幾天想了解如何寫彈窗組件，參考了知乎上的回答有以下兩種可取的寫法狀態管理如果彈窗組件放在根組件，使用來管理組件的和。前幾天想了解vue如何寫彈窗組件，參考了知乎上的回答：https://www.zhihu.com/questio...有以下兩種可取的寫法：1.狀態管理如果彈窗組件放在根組件，使用vuex來管理組件的show和hide。放在組件內，通過增加v-show或v-if來控...

voyagelab 2019-08-21 17:10 評論0 收藏0
vue2實踐（持續更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。 1. props 帶不帶冒號的區別 ...

n7then 2019-08-20 15:05 評論0 收藏0
Vue2.0 仿滴滴出行項目

摘要：仿滴滴出行項目最近，各大社區出現很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發現，輸入的時候居然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目最近，各大社區出現很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。效果預覽 showImg(h...

ShevaKuilin 2019-08-21 11:44 評論0 收藏0
封裝框架的實踐

摘要：最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。基于和封裝的框架，集成數據存儲字體圖標庫拓展語言網絡請求等模塊，為了讓業務開發更專注于數據驅動。最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。基于vue和elementUI封裝的框架，集成數據存儲localforage、字體圖標庫font-awesome、css拓展語言scss、網絡請求axios等模塊，為了讓業...

Dogee 2019-08-23 13:57 評論0 收藏0