資訊專欄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.事件管理 注冊一個全局事件來打開彈窗，傳入需展示的文字和相關(guān)的邏輯控制，可結(jié)合promise，實現(xiàn)異步
覺得對用像confirme和propmt這類彈窗，還是事件驅(qū)動的好。最好就是能使用promise回調(diào)。
于是手癢就寫了一個。下面是代碼。
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) { //防止多次觸發(fā)
return;
}
// 為彈窗數(shù)據(jù)賦值
instance.show = true;
instance.isAlert = true;
instance.okText = okText||"確定";
instance.message = text;
//返回一個promise對象，并為按鈕添加事件監(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("請輸入名稱","確認","text").then(res =>{
// do something use res
});
},
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51405.html
摘要：前幾天想了解如何寫彈窗組件，參考了知乎上的回答有以下兩種可取的寫法狀態(tài)管理如果彈窗組件放在根組件，使用來管理組件的和。 前幾天想了解vue如何寫彈窗組件，參考了知乎上的回答：https://www.zhihu.com/questio...有以下兩種可取的寫法：1.狀態(tài)管理 如果彈窗組件放在根組件，使用vuex來管理組件的show和hide。放在組件內(nèi)，通過增加v-show或v-if來控...
摘要：記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標簽里的數(shù)據(jù)發(fā)生變化時候觸發(fā)數(shù)據(jù)可能更新了，但是沒有綁定到上面的話，不會調(diào)用鉤子函數(shù)。 記錄一些小技巧和踩過的坑 由于本篇文章內(nèi)容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號的區(qū)別 ...
摘要：仿滴滴出行項目最近，各大社區(qū)出現(xiàn)很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目?？墒牵髞碓谑謾C上發(fā)現(xiàn)，輸入的時候居然調(diào)不出軟鍵盤，寫項目的時候沒考慮到設(shè)備問題，簡直是大大的失誤。也就是說可以在組件內(nèi)部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
閱讀 1602·2019-08-30 13:18
閱讀 1584·2019-08-29 12:19
閱讀 2127·2019-08-26 13:57
閱讀 4152·2019-08-26 13:22
閱讀 1192·2019-08-26 10:35
閱讀 2997·2019-08-23 18:09
閱讀 2517·2019-08-23 17:19
閱讀 689·2019-08-23 17:18
