資訊專欄INFORMATION COLUMN
摘要：前幾天想了解如何寫彈窗組件，參考了知乎上的回答有以下兩種可取的寫法狀態(tài)管理如果彈窗組件放在根組件，使用來管理組件的和。
前幾天想了解vue如何寫彈窗組件，參考了知乎上的回答：
https://www.zhihu.com/questio...
有以下兩種可取的寫法：
1.狀態(tài)管理 如果彈窗組件放在根組件，使用vuex來管理組件的show和hide。放在組件內(nèi)，通過增加v-show或v-if來控制，可結(jié)合slot，定義不同需求的彈窗
2.事件管理 注冊一個(gè)全局事件來打開彈窗，傳入需展示的文字和相關(guān)的邏輯控制，可結(jié)合promise，實(shí)現(xiàn)異步
覺得對(duì)用像confirme和propmt這類彈窗，還是事件驅(qū)動(dòng)的好。最好就是能使用promise回調(diào)。
于是手癢就寫了一個(gè)。下面是代碼。
propmt.js
import Vue from "vue"
import promptComponent from "./prompt.vue" // 引入彈窗的vue文件
const promptConstructor = Vue.extend(promptComponent); // 注冊組件
let instance = new promptConstructor().$mount(""); // 獲得組件的實(shí)例
document.body.appendChild(instance.$el); // 將組件的element插入到body中
const Alert = (text,okText)=>{
if(instance.show === true) { //防止多次觸發(fā)
return;
}
// 為彈窗數(shù)據(jù)賦值
instance.show = true;
instance.isAlert = true;
instance.okText = okText||"確定";
instance.message = text;
//返回一個(gè)promise對(duì)象，并為按鈕添加事件監(jiān)聽
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
{{message}}
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("請(qǐng)輸入名稱","確認(rèn)","text").then(res =>{
// do something use res
});
},
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/89201.html
摘要：前幾天想了解如何寫彈窗組件，參考了知乎上的回答有以下兩種可取的寫法狀態(tài)管理如果彈窗組件放在根組件，使用來管理組件的和。 前幾天想了解vue如何寫彈窗組件，參考了知乎上的回答：https://www.zhihu.com/questio...有以下兩種可取的寫法：1.狀態(tài)管理 如果彈窗組件放在根組件，使用vuex來管理組件的show和hide。放在組件內(nèi)，通過增加v-show或v-if來控...
摘要：記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導(dǎo)致編輯器有點(diǎn)卡，所以新開辟了一篇實(shí)踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標(biāo)簽里的數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)數(shù)據(jù)可能更新了，但是沒有綁定到上面的話，不會(huì)調(diào)用鉤子函數(shù)。 記錄一些小技巧和踩過的坑 由于本篇文章內(nèi)容太多，導(dǎo)致SF編輯器有點(diǎn)卡，所以新開辟了一篇 vue2實(shí)踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號(hào)的區(qū)別 ...
摘要：仿滴滴出行項(xiàng)目最近，各大社區(qū)出現(xiàn)很多小伙伴的項(xiàng)目，趁著這股熱潮我也用擼了一個(gè)滴滴出行的項(xiàng)目?？墒牵髞碓谑謾C(jī)上發(fā)現(xiàn)，輸入的時(shí)候居然調(diào)不出軟鍵盤，寫項(xiàng)目的時(shí)候沒考慮到設(shè)備問題，簡直是大大的失誤。也就是說可以在組件內(nèi)部進(jìn)行請(qǐng)求，不需要提交。 Vue2.0 仿滴滴出行項(xiàng)目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項(xiàng)目，趁著這股熱潮我也用vue擼了一個(gè)滴滴出行的項(xiàng)目。 效果預(yù)覽 showImg(h...
摘要：最近在嘗試著封裝一個(gè)框架，礙于種種原因，先從簡單的入手吧?；诤头庋b的框架，集成數(shù)據(jù)存儲(chǔ)字體圖標(biāo)庫拓展語言網(wǎng)絡(luò)請(qǐng)求等模塊，為了讓業(yè)務(wù)開發(fā)更專注于數(shù)據(jù)驅(qū)動(dòng)。 最近在嘗試著封裝一個(gè)框架，礙于種種原因，先從簡單的入手吧?；趘ue和elementUI封裝的框架，集成 數(shù)據(jù)存儲(chǔ)localforage、字體圖標(biāo)庫font-awesome、css拓展語言scss、網(wǎng)絡(luò)請(qǐng)求axios等模塊，為了讓業(yè)...
閱讀 4422·2021-09-09 09:33
閱讀 2385·2019-08-29 17:15
閱讀 2372·2019-08-29 16:21
閱讀 978·2019-08-29 15:06
閱讀 2619·2019-08-29 13:25
閱讀 581·2019-08-29 11:32
閱讀 3255·2019-08-26 11:55
閱讀 2593·2019-08-23 18:24
