记录帖:antdesign使用中的一些个人偷懒方法

273 阅读1分钟

有时候需要频繁使用提示框,但是使用一次的代码量太多,看起来很不清爽,且每次都要写确认,取消。如下

         this.$confirm({  
         title: '提示',
        content: '确认删除此条内容吗', 
        okText:'确定', 
       cancelText:'取消',
        onOk: async()=> { 
          NProgress.start()
          let {data:{success}}=await this.$post('/sys/removest',{ id            
        })            
       if (success) {
              this.$message.success('删除成功');
              this.getList()} 
          NProgress.done()
        }
    });

由于this.$confirm()这个方法也是通过this点出来的,说明this都指向Vue,所以我就尝试把他封装在mixin中

  $mc(title,content,onOk){
       this.$confirm({ 
              title,
              content, 
              okText:'确定',  
              cancelText:'取消',
              onOk
    });
}

这样后面就可以在组件中这样使用

         this.$mc('提示','删除后无法恢复',async ()=>{                
             NProgress.start() 
            let {data:{success}}=await this.$post('/sys/removest',{ id})               
             if (success) {
                 this.$message.success('删除成功');
                 this.getList()
              }               
           NProgress.done()
})  

但是传入回调感觉还是很乱,可以在mixin中使用promise来优化

  $mc(title,content){  
       return new Promise((resolve) => {
              this.$confirm({
                  title,
                  content,
                  okText:'确定', 
                 cancelText:'取消',
                  onOk(){
                       resolve()
                     }
               });
          })
     }

这样$mc()方法就是一个promise对象,只有点击确定按钮才调用resolve,用户不点击确定按钮,await后代码就不执行。以后在组件中调用时就会很方便,直接在后面写所想做的事就可以了。

      async del(id) {
       await this.$mc('提示','删除后无法恢复') 
         NProgress.start() 
         let {data:{success}}=await this.$post('/sys/removest',{id})
          if (success) {
                 this.$message.success('删除成功');
                 this.getList() 
             }
           NProgress.done() 
        }
   ```