最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

摘要

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

分析

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

  • elment-ui

  • Iview
  • Ant Design Vue

    大家在實(shí)踐過程中,實(shí)現(xiàn)這樣一個(gè)簡單操作,點(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è)方法。 我們針對彈窗的調(diào)用習(xí)慣更傾向于layer和react這種隨時(shí)取用的寫法

    那么問題來了,vue雖然號稱支持jsx寫法如下圖,但卻會(huì)失去擁有當(dāng)前頁面屬性方法共享的部分權(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>的前提下,簡單來講,異步調(diào)用但采用同步寫法。 如果把Promise比作 "線程" 那我們就需要一個(gè)調(diào)度,去控制在點(diǎn)擊 “確認(rèn)” 時(shí)結(jié)束。

  • deferred對象就是jQuery的回調(diào)函數(shù)解決方案,$.Deferred 給我提供了思路,也就是把promise對象的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)窗封裝如下,可以看到我們在show的時(shí)候返回了promise對象,在確認(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í)本次分享頁并沒有很多新意,這種引用式的封裝,很多人也早都想到了,只不過感覺針對彈窗這塊的封裝,很多走了極端,要么就追求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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論

乌审旗| 福鼎市| 沙湾县| 临澧县| 南宫市| 南华县| 化德县| 磐安县| 垫江县| 南陵县| 丹江口市| 福建省| 河源市| 乌兰县| 衡山县| 吴川市| 佛冈县| 徐州市| 鸡泽县| 米林县| 洪洞县| 邯郸市| 扶风县| 海兴县| 西昌市| 福州市| 盐池县| 临澧县| 且末县| 汤阴县| 襄城县| 凤翔县| 安达市| 陵川县| 资中县| 古交市| 弥勒县| 宝坻区| 滁州市| 英德市| 日喀则市|