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

教你輕松解決Vue?Dialog彈窗詬病

 更新時(shí)間:2023年01月07日 09:13:17   作者:沈二到不行  
彈窗經(jīng)常被使用在一些表單的增刪改查啊,或者彈出一些提示信息等等,這篇文章主要給大家介紹了關(guān)于Vue?Dialog彈窗詬病解決的相關(guān)資料,需要的朋友可以參考下

摘要

相信用Vue框架多的老哥對(duì)彈窗的使用的問題都有一些使用上的詬病,本輪主要闡述針對(duì)組件封裝不符合邏輯編寫,如何最小化封裝達(dá)成簡(jiǎn)化調(diào)用目的。

分析

常規(guī)的Vue前端UI組件如elment-ui、Iview、Ant Design Vue等UI組件庫(kù)針對(duì)模態(tài)窗的封裝基本都是套式的,MVVM大家基本都在提,從另外一個(gè)角度分析Dialog封裝在實(shí)際使用上,彈窗過多時(shí)漫天的變量如何解決,我們把temlplate中的內(nèi)容理解為表現(xiàn)層,script理解為邏輯層,雖然解決了數(shù)據(jù)的綁定問題,但說實(shí)在的,vue的邏輯層和表現(xiàn)層互相穿插使用還是相對(duì)存在一些問題,也許你會(huì)提Vue也支持Jsx寫法,安裝了插件也能實(shí)現(xiàn)React的寫法和效果,此時(shí)我以模態(tài)窗的例子來說明一些問題

  • elment-ui

  • Iview
  • Ant Design Vue

    大家在實(shí)踐過程中,實(shí)現(xiàn)這樣一個(gè)簡(jiǎn)單操作,點(diǎn)擊明細(xì)->彈窗表單信息->確定調(diào)用數(shù)據(jù)保存接口 這個(gè)過程如一個(gè)業(yè)務(wù)處理中有很多的編輯彈窗,或者保存邏輯需要連貫性,還有區(qū)分會(huì)憑空使得一個(gè)處理變得很凌亂復(fù)雜。

    可以看到一個(gè)彈窗,如果擴(kuò)展3個(gè)data變量,兩個(gè)方法。如果有10個(gè)彈窗,那么也變將會(huì)多出來310個(gè)屬性和210個(gè)方法。 我們針對(duì)彈窗的調(diào)用習(xí)慣更傾向于layer和react這種隨時(shí)取用的寫法

    那么問題來了,vue雖然號(hào)稱支持jsx寫法如下圖,但卻會(huì)失去擁有當(dāng)前頁(yè)面屬性方法共享的部分權(quán)力,本質(zhì)上來說,其實(shí)就是函數(shù)式組件乃至于后來都趨向的鉤子函數(shù)或者叫組合式,其本質(zhì)也就是上下文的共享。

優(yōu)化辦法

如果結(jié)合vue特點(diǎn),要合并屬性和方法,必然要封裝模態(tài)窗為組件,但顯示確認(rèn),并不是一個(gè)鏈結(jié)構(gòu),由此就必須實(shí)現(xiàn)一個(gè)回調(diào),但回調(diào)這種寫法,往往是要在組件中進(jìn)行一些約定,而且現(xiàn)在在Promise橫行外加aysnc await 去JQ時(shí)代鏈?zhǔn)秸勰?/strong>的前提下,簡(jiǎn)單來講,異步調(diào)用但采用同步寫法。 如果把Promise比作 "線程" 那我們就需要一個(gè)調(diào)度,去控制在點(diǎn)擊 “確認(rèn)” 時(shí)結(jié)束。

  • deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案,$.Deferred 給我提供了思路,也就是把promise對(duì)象的reject和resolve開放出來
function generateDeferredPromise() {
return (() => {
  let resolve;
  let reject;
  let p = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });

  return {
    promise: p,
    reject,
    resolve
  };
})();
}
  • 完整的模態(tài)窗封裝如下,可以看到我們?cè)趕how的時(shí)候返回了promise對(duì)象,在確認(rèn)的時(shí)候觸發(fā)了回調(diào)
<template>
 <el-dialog 
 :title="title" 
 :visible.sync="drawer">
       <slot />
<div slot="footer" class="dialog-footer">
   <el-button @click="drawer = false">取 消</el-button>
   <el-button type="primary" @click="saveData">確 定</el-button>
</div>
</el-dialog>
</template>

<script>

function generateDeferredPromise() {
 return (() => {
   let resolve;
   let reject;
   let p = new Promise((res, rej) => {
     resolve = res;
     reject = rej;
   });

   return {
     promise: p,
     reject,
     resolve
   };
 })();
}
export default {
 name:'modal',
 props: {
   title: {
     type: String,
     default: undefined,
   },
   handle:{
       type:Function,
       default:(res)=>{},
   }
 },
   data() {
     return {
       drawer: false,
       promise:null,
     }
   },
   mounted() {
       if(this.handle){
           this.handle(this);
       }
   },
   methods: {
     show() {
       this.drawer = true
       this.promise=new generateDeferredPromise();
       return this.promise.promise;
     },
     saveData(){
       this.promise.resolve();
       this.promise.promise.then(()=>{
         this.drawer=false;
       })
     
     }
   }
}
</script>

<style>

</style>
  • 調(diào)用時(shí)如下,可以很輕松的變相達(dá)成函數(shù)式編程的特點(diǎn),在調(diào)用時(shí)減去了2個(gè)屬性和一個(gè)方法,10個(gè)彈窗由原本的30+20個(gè)減少為20。
   <modal title="審批/反饋" ref="modal">
    <el-descriptions :model="audit"  class="margin-top"  :column="1"  border>
      <el-descriptions-item label="意見">
         <el-radio-group v-model="audit.state">
     <el-radio  :label="true">通過</el-radio>
     <el-radio  :label="false">不通過</el-radio>
   </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="內(nèi)容">
         <el-input type="textarea" v-model="audit.comment"></el-input>
      </el-descriptions-item>
    </el-descriptions>
</modal>
async handleAudit(row) {
     const { show } = this.$refs["modal"] || {};
     show().then(async () => {
      //保存邏輯處理
     });
   },

總結(jié)

  • 本質(zhì)其實(shí)本次分享頁(yè)并沒有很多新意,這種引用式的封裝,很多人也早都想到了,只不過感覺針對(duì)彈窗這塊的封裝,很多走了極端,要么就追求layer那種寫法兼容習(xí)慣,要么干脆還是保留原樣,只做一些特殊處理,屬性還是原樣保留了。
  • 至于回調(diào),我之前雖然用過一段,但還是覺得不慎習(xí)慣,因?yàn)榕既挥袀€(gè)共享彈窗存在確認(rèn)后邏輯不同的問題給我造成了困擾,覺得寫法有點(diǎn)兒變態(tài),因此做了一些嘗試和延展,覺得算是比較良性的一個(gè)調(diào)用方式吧。
  • 框架性的東西,我詫異的是,理論性的東西,一個(gè)比一個(gè)探的深,但涉及到便捷性,卻很少有人去探究,乃至于框架性的東西除了UI和風(fēng)格不同,寫法也大同小異。

到此這篇關(guān)于輕松解決Vue Dialog彈窗詬病的文章就介紹到這了,更多相關(guān)Vue Dialog彈窗問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue基礎(chǔ)配置講解

    Vue基礎(chǔ)配置講解

    在本篇文章里小編給大家整理的是關(guān)于Vue基礎(chǔ)配置講解內(nèi)容,有興趣的朋友們可以學(xué)習(xí)下。
    2019-11-11
  • 關(guān)于vue data中的this指向問題

    關(guān)于vue data中的this指向問題

    這篇文章主要介紹了關(guān)于vue data中的this指向問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • Vue3+Elementplus實(shí)現(xiàn)面包屑功能

    Vue3+Elementplus實(shí)現(xiàn)面包屑功能

    這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
    2023-11-11
  • Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析

    Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析

    這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • Vue父子組件傳值的三種方法

    Vue父子組件傳值的三種方法

    這篇文章主要介紹了Vue父子組件傳值的三種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • 通過vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄

    通過vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄

    這篇文章主要給大家介紹了關(guān)于通過vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • vue中的.sync修飾符用法及原理分析

    vue中的.sync修飾符用法及原理分析

    這篇文章主要介紹了vue中的.sync修飾符用法及原理分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue如何判斷安卓還是IOS

    vue如何判斷安卓還是IOS

    這篇文章主要介紹了vue如何判斷安卓還是IOS,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單

    vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單

    這篇文章主要介紹了vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單,本文給大家分享個(gè)例子,給大家及時(shí)的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2018-11-11
  • 基于Vue uniapp實(shí)現(xiàn)貪吃蛇游戲

    基于Vue uniapp實(shí)現(xiàn)貪吃蛇游戲

    貪吃蛇游戲想必是很多70、80后的回憶,一直到現(xiàn)在也深受大家的喜歡。本文將利用Vue+uniapp實(shí)現(xiàn)這一經(jīng)典的游戲,感興趣的可以了解一下
    2022-04-04

最新評(píng)論