前幾天想了解vue如何寫彈窗組件

創(chuàng)新互聯(lián)是專業(yè)的太和網(wǎng)站建設(shè)公司，太和接單;提供做網(wǎng)站、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行太和網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

有以下兩種可取的寫法：

1.狀態(tài)管理 如果彈窗組件放在根組件，使用vuex來(lái)管理組件的show和hide。放在組件內(nèi)，通過(guò)增加v-show或v-if來(lái)控制，可結(jié)合slot，定義不同需求的彈窗

2.事件管理 注冊(cè)一個(gè)全局事件來(lái)打開(kāi)彈窗，傳入需展示的文字和相關(guān)的邏輯控制，可結(jié)合promise，實(shí)現(xiàn)異步

覺(jué)得對(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); // 注冊(cè)組件
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)聽(tīng)
  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}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：VUE2實(shí)現(xiàn)事件驅(qū)動(dòng)彈窗示例-創(chuàng)新互聯(lián)
分享路徑：http://weahome.cn/article/hhggi.html