欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

以v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件

 更新時(shí)間:2018年05月21日 08:36:48   作者:nodaysoff  
這篇文章主要介紹了vue彈窗組件之兩種方式v-model與promise,每種方式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

最近公司有一個(gè)后臺(tái)業(yè)務(wù)雖然也是寫在了現(xiàn)有的后臺(tái)系統(tǒng)中,但是之后要為這個(gè)業(yè)務(wù)單獨(dú)拉出來(lái)新建一個(gè)后臺(tái)系統(tǒng),所以現(xiàn)有的后臺(tái)系統(tǒng)中的vue組件庫(kù),就不能用了(因?yàn)椴恢缹?lái)的系統(tǒng)要基于什么組件庫(kù),以防給未來(lái)移植項(xiàng)目帶來(lái)麻煩),這次業(yè)務(wù)中又遇到了彈窗的功能,所以只能手動(dòng)寫一個(gè)了(雖然說(shuō)彈窗組件很簡(jiǎn)單,也是想自己總結(jié)一下,有不對(duì)的地方也請(qǐng)指出),一開(kāi)始用傳統(tǒng)的props,$emit但是覺(jué)得要接兩個(gè)取消與確認(rèn)的回調(diào)這塊的邏輯分散了所以就用了promise兩個(gè)回調(diào)的方式把兩個(gè)回調(diào)寫在了一起,并不一定好,算是提供一種思路吧。

一.概覽

先看最后的調(diào)用方式

props $emit方式

<chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="確認(rèn)" title="彈窗標(biāo)題" small @on-ok="onOK" @on-cancel="onCancel">
  <div>slot的東西,想向彈窗中添加自定義的內(nèi)容</div>
</chat-modal>
methods: {
  display() {
   this.showModal = true;//交互點(diǎn)擊手動(dòng)觸發(fā)顯示彈窗 
  },
  onOK() {},//點(diǎn)擊確認(rèn)的回調(diào)
  onCancel() {}//點(diǎn)擊取消的回調(diào)
}

promise的回調(diào)方式

<chat-modal ref="chat-modal"></chat-modal>
methods: {
  display() {
    this.$refs["chat-modal"].openModal({
      title: "彈窗標(biāo)題",
      sureText: "確認(rèn)",
      cancelText: "取消"
    }).then(res => {
      //點(diǎn)擊確認(rèn)的回調(diào)
    }, res => {
      //點(diǎn)擊取消的回調(diào)
    })
  }
}

第二種方式的好處就是把所有的邏輯都集中到了一個(gè)方法里。

二.看下組件的源碼

tip: 樣式有些爛...

<template>
  <div>
    <div class="shadow" v-show="showModal"></div>
    <div class="modal" :class="{'smSize': otherText.small || small}" v-show="showModal">
      <div class="header">{{ otherText.title || title}}</div>
      <div class="body">
        <slot></slot>
      </div>
      <div class="footer">
        <div class="item success" id="sure" ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</div>
        <div class="item red" id="cancel" ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</div>
      </div>
    </div>
  </div>
</template>
<script>
//此組件提供兩種調(diào)用方法,可以在組件上v-model一個(gè)表示是否顯示彈窗的對(duì)話框,然后需要的一些值通過(guò)props傳入,然后$emit在組件上@監(jiān)聽(tīng)做回調(diào)
//第二中方法所有的傳值回調(diào)都只需要在組件內(nèi)部的一個(gè)方法調(diào)用然后在組件外部this.$refs[xxx].open調(diào)用然后.then觸發(fā)回調(diào),比上一種方便些
var initOtherText = {
  sureText: "",
  cancelText: "",
  title: "",
  small: false
};
export default {
  props: {
    title: {
      type: String
    },
    sureText: {
      type: String
    },
    cancelText: {
      type: String
    },
    value: {
      type: Boolean
    },
    small: {
      type: Boolean
    }
  },
  watch: {
    value(newVal) {
      this.showModal = newVal;
    }
  },
  data() {
    return {
      otherText: JSON.parse(JSON.stringify(initOtherText)),
      showModal: this.value
    };
  },
  methods: {
    makeSure() {
      this.$emit("on-ok");
      this.$emit("input", false);
    },
    makeCancel() {
      this.$emit("on-cancel");
      this.$emit("input", false);
    },
    openModal(otherText) {
      this.otherText = { ...otherText };
      this.showModal = true;
      var pms = new Promise((resolve, reject) => {
        this.$refs["sure"].addEventListener("click", () => {
          this.showModal = false;
          resolve("點(diǎn)擊了確定");
        });
        this.$refs["cancel"].addEventListener("click", () => {
          this.showModal = false;
          reject("點(diǎn)擊了取消");
        });
      });
      return pms;
    }
  }
};
</script>
<style lang="scss" scoped>
.shadow {
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: 50;
}
.modal {
  display: table-cell;
  vertical-align: middle;
  overflow-x: hidden;
  position: fixed;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
  border-radius: 5px;
  outline: 0px;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
}
.header {
  align-items: center;
  background-color: #62a39e;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  color: #fff;
  font-weight: bold;
  display: -ms-flexbox;
  display: flex;
  height: 3.5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.body {
  align-items: center;
  padding: 1.5rem;
}
.footer {
  justify-content: flex-end;
  padding: 1.5rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  float: right;
}
.item {
  color: white;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
}
.info {
  background-color: #2196f3;
}
.success {
  background-color: #62a39e;
}
.red {
  background-color: #e95358;
}

.smSize {
  height: 200px;
}
</style>

首先分析一下第一種方式: 調(diào)用者需要在組件外部v-model上綁定一個(gè)變量(例中為showModal)來(lái)指示彈窗是否顯示,顯示的時(shí)候需要在組件外部手動(dòng)設(shè)置 this.showModal = true ,組件內(nèi)部props定義一個(gè)屬性來(lái)接這個(gè)值為 value: {type: Boolean} ,同時(shí)在組件內(nèi)部在用聲明一個(gè)變量用來(lái)同步外部傳進(jìn)來(lái)的props值 默認(rèn)值為 showModal: this.value (內(nèi)部聲明的值也叫了showModal),在watch中監(jiān)聽(tīng)進(jìn)行同步 watch: { value(newVal) { this.showModal = newVal } } ;然后把組件內(nèi)部的這個(gè)showModal值綁定在需要顯示或者隱藏的DOM元素上。向外拋出事件的時(shí)候是在點(diǎn)擊組件內(nèi)部的確定與關(guān)閉按鈕時(shí)候

makeSure() {
      this.$emit("on-ok");
      this.$emit("input", false);
    },
makeCancel() {
      this.$emit("on-cancel");
      this.$emit("input", false);
    }

this.$emit("on-ok");this.$emit("on-cancel"); 這兩句的是向外拋出事件在組件外部@接一下然后寫自己需要的回調(diào)函數(shù)。這時(shí)就可以實(shí)現(xiàn)彈窗的顯示與隱藏了,你可能發(fā)現(xiàn)并沒(méi)有一句代碼去設(shè)置this.showModal = false;彈窗就隱藏了。主要是因?yàn)檫@幾句代碼 v-model = 'showModal' 和 組件內(nèi)部的 props: {value: {type: Boolean}} this.$emit("input", false) 。v-model其實(shí)是vue的語(yǔ)法糖, <chat-modal v-model="showModal"> 其實(shí)可以寫為 <chat-modal :value="showModal" @input="showModal = arguments[0]"> 所以要求我們?cè)诮M件內(nèi)部必須規(guī)定props的名字必須為value, 然后在組件內(nèi)部觸發(fā)確定或者取消的時(shí)候在組件內(nèi)部觸發(fā) this.$emit("input", false) 這樣實(shí)現(xiàn)了直接隱藏彈窗而不必打擾用戶讓用戶在組件外部在手動(dòng)將showModal置為false.

然后來(lái)看promise的方式: 第一種方式傳進(jìn)來(lái)的值都通過(guò)props來(lái)接的,這種方式通過(guò)在組件內(nèi)部定義了另一個(gè)對(duì)象來(lái)接傳進(jìn)來(lái)的值,

var initOtherText = {
  sureText: "",
  cancelText: "",
  title: "",
  small: false
};
otherText: JSON.parse(JSON.stringify(initOtherText)),

然后在menthods里定義了一個(gè)名為openModal的方法,然后把傳進(jìn)來(lái)的一系列參數(shù)賦值給組件內(nèi)部的對(duì)象 this.otherText = { ...otherText }; this.showModal = true; 并且將showModal置為true,然后每次觸發(fā)的時(shí)候新建一個(gè)promise對(duì)象,里面的異步事件為點(diǎn)擊確定和取消的兩個(gè)點(diǎn)擊事件,這里要操作DOM了

this.$refs["sure"].addEventListener("click", () => {
  this.showModal = false;
  resolve("點(diǎn)擊了確定");
});

獲取確定按鈕的DOM元素綁定點(diǎn)擊事件,回調(diào)里將showModal置為false并且resolve,

this.$refs["cancel"].addEventListener("click", () => {
  this.showModal = false;
  reject("點(diǎn)擊了取消");
});

獲取取消按鈕的DOM綁定點(diǎn)擊事件,回調(diào)里reject.

遇到的坑

這之前遇到了一個(gè)坑,因?yàn)榈谝淮我呀?jīng)綁定了點(diǎn)擊事件,第二次resolve和reject就會(huì)失敗,本想取消一下綁定事件,但是因?yàn)閷⒄麄€(gè)彈窗v-show="showModal"的原因整個(gè)DOM被display:none;了就不需要手動(dòng)解綁了。 第二個(gè)是關(guān)于用v-if還是v-show來(lái)隱藏彈窗,一開(kāi)始用的是v-if但是發(fā)現(xiàn)在這步時(shí)

this.showModal = true;
var pms = new Promise((resolve, reject) => {
  this.$refs["sure"].addEventListener.xxx//省略
});
return pms;

將showModal置為true時(shí)然后就去綁定事件這時(shí)候還沒(méi)有DOM還沒(méi)有解析玩DOM樹(shù)上還沒(méi)有,要不就得用this.$nextTick增加了復(fù)雜度,最后采用了v-show;

關(guān)于優(yōu)先級(jí)問(wèn)題

如果既在組件上用prop傳了值(title,sureText之類的)如 <chat-modal" title="xx" sureText="xxx"></chat-modal> 也在方法里傳了

this.$refs["chat-modal"].openModal({
  title: "服務(wù)小結(jié)",
  sureText: "提交并結(jié)束",
  cancelText: "取消"
  }).then();

是以方法的優(yōu)先級(jí)為高,在組件內(nèi)部DOM元素上通過(guò)||設(shè)置了優(yōu)先級(jí),比如 <div class="header popModal">{{ otherText.title || title}}</div> 有方法的值取方法的值,沒(méi)有取props得值。

總結(jié)

以上所述是小編給大家介紹的以v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 前端Vue設(shè)置cookie、刪除cookie,獲取cookie方式

    前端Vue設(shè)置cookie、刪除cookie,獲取cookie方式

    這篇文章主要介紹了前端Vue設(shè)置cookie、刪除cookie,獲取cookie方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹(shù)型

    vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹(shù)型

    本文主要介紹了vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹(shù)型,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vue.js el-table動(dòng)態(tài)單元格列合并方式

    vue.js el-table動(dòng)態(tài)單元格列合并方式

    這篇文章主要介紹了vue.js el-table動(dòng)態(tài)單元格列合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • Vue中關(guān)于重新渲染組件的方法及總結(jié)

    Vue中關(guān)于重新渲染組件的方法及總結(jié)

    這篇文章主要介紹了Vue中關(guān)于重新渲染組件的方法及總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue3 ref獲取不到子組件的解決方法

    vue3 ref獲取不到子組件的解決方法

    在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語(yǔ)法糖,父組件通過(guò)給子組件定義ref訪問(wèn)其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下
    2024-06-06
  • Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決

    Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決

    這篇文章主要介紹了Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式

    vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式

    這篇文章主要介紹了vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue中window.onresize的使用解析

    vue中window.onresize的使用解析

    這篇文章主要介紹了vue中window.onresize的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue腳手架vue-cli的學(xué)習(xí)使用教程

    vue腳手架vue-cli的學(xué)習(xí)使用教程

    本篇文章主要介紹了vue腳手架vue-cli的學(xué)習(xí)使用教程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • vue常見(jiàn)的通信方式總結(jié)

    vue常見(jiàn)的通信方式總結(jié)

    我們?nèi)粘m?xiàng)目開(kāi)發(fā)中,少不了組件之間的通信,我們可能只知道一些常見(jiàn)的方式比如props,emits,其實(shí),實(shí)現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見(jiàn)的通信方式,需要的朋友可以參考下
    2023-08-08

最新評(píng)論