vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Dialog弹窗问题

教你轻松解决Vue Dialog弹窗诟病

作者:沈二到不行

弹窗经常被使用在一些表单的增删改查啊,或者弹出一些提示信息等等,这篇文章主要给大家介绍了关于Vue Dialog弹窗诟病解决的相关资料,需要的朋友可以参考下

摘要

相信用Vue框架多的老哥对弹窗的使用的问题都有一些使用上的诟病,本轮主要阐述针对组件封装不符合逻辑编写,如何最小化封装达成简化调用目的。

分析

常规的Vue前端UI组件如elment-uiIviewAnt Design Vue等UI组件库针对模态窗的封装基本都是套式的,MVVM大家基本都在提,从另外一个角度分析Dialog封装在实际使用上,弹窗过多时漫天的变量如何解决,我们把temlplate中的内容理解为表现层,script理解为逻辑层,虽然解决了数据的绑定问题,但说实在的,vue的逻辑层和表现层互相穿插使用还是相对存在一些问题,也许你会提Vue也支持Jsx写法,安装了插件也能实现React的写法和效果,此时我以模态窗的例子来说明一些问题

优化办法

如果结合vue特点,要合并属性和方法,必然要封装模态窗为组件,但显示确认,并不是一个链结构,由此就必须实现一个回调,但回调这种写法,往往是要在组件中进行一些约定,而且现在在Promise横行外加aysnc await 去JQ时代链式折磨的前提下,简单来讲,异步调用但采用同步写法。 如果把Promise比作 "线程" 那我们就需要一个调度,去控制在点击 “确认” 时结束。

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

  return {
    promise: p,
    reject,
    resolve
  };
})();
}
<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>
   <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="内容">
         <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 () => {
      //保存逻辑处理
     });
   },

总结

到此这篇关于轻松解决Vue Dialog弹窗诟病的文章就介绍到这了,更多相关Vue Dialog弹窗问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文