VUE笔记

VUE笔记（甲）

---

---

前言

最近做的项目用到的一些小工具小技巧

---

一、VUE介绍

略。

二、笔记内容

1.before-leave

before-leave钩子，它是el-tabs的一个一个属性，给该属性绑定一个函数，则在触发tab切换时将执行绑定的函数。

<el-tabs v-model="activeName" type="card" :before-leave="leave">
      <el-tab-pane name="first">
        <span>
          录入
        </span>
        <Edit/>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span>
          历史查询
        </span>
        <Basic/>
      </el-tab-pane>
      <el-tab-pane  name="three">
        <span>
          详情
        </span>
        <orderShow/>
      </el-tab-pane>
    </el-tabs>

methods: {
leave(activeName, oldActiveName) {
     随便写点逻辑
    }

2.Promise

Promise 就是用同步的方式写异步的代码，用来解决回调问题

有两个参数，第一个是成功 resolve 调用的方法，第二个是失败 reject 调用的方法
下面做一个买笔写作业上交的演示，它们是层层依赖的关系，下一步的的操作需要使用上一部操作的结果。（这里使用 setTimeout 模拟异步操作），正式开发可以用 ajax 异步

 //买笔
 2         function buy(){
 3             console.log("开始买笔");
 4             var p = new Promise(function(resolve,reject){
 5                 setTimeout(function(){
 6                     console.log("买了笔芯");
 7                     resolve("数学作业");
 8                 },1000);
 9             });
10             return p;
11         }
12         //写作业
13         function work(data){
14             console.log("开始写作业："+data);
15             var p = new Promise(function(resolve,reject){
16                 setTimeout(function(){
17                     console.log("写完作业");
18                     resolve("作业本");
19                 },1000);
20             });
21             return p;
22         }
23 
24         function out(data){
25             console.log("开始上交："+data);
26             var p = new Promise(function(resolve,reject){
27                 setTimeout(function(){
28                     console.log("上交完毕");
29                     resolve("得分：A");
30                 },1000);
31             });
32             return p;
33         }
42 
43         //推荐这种简化的写法
44         buy().then(work).then(out).then(function(data){
45             console.log(data);
46         });

---

3.loading

在vue中使用element-ui 里面的按钮点击后显示加载中，防止重复提交，个人觉得挺好玩的功能。

 <div class="dialog-footer">
        <el-button type="info" @click="cancelHandle">关闭</el-button>
        <el-button
          v-if="!isDisable"
          type="primary"
          :loading="buttonLoading"
          @click="confirmHandle"
        >{{ loadingbuttext }}
        </el-button>
      </div>

  data() {
    data() {
     buttonLoading: false,
         loadingbuttext: '确定'
    }

}
	
 methods: {
	 this.$refs['ruleForm'].validate(async(valid) => {
          if (valid) {
           this.loadingbut = true
           let res = {}
           if (this.toChildType === 'sure') {
                 this.loadingbuttext = '下单中...'
                 res = await save(this.ruleForm)
            } else {
               this.loadingbuttext = '退单中...'
               res = await cancel(this.ruleForm)
            }
            if (res.resultCode === S_OK || res.resultCode === S_OK2) {
              this.loadingbut = false
              this.loadingbuttext = '确定'
              this.$emit('activeNameEmit', { active: 'second', data: { orderId: '', initFlag: '1' }})
            }
          }
        })
      },
}

效果

---

## 4.οncοpy="return false" οnpaste="return false"

禁止选中和禁止粘贴，这个功能在很多地方都可能遇到，比如确认密码等等。

 <el-input v-model="form.passWord" clearable :disabled="isDisable" placeholder="请再次确认密码" οncοpy="return false" οnpaste="return false" />

---

总结

今天就先到这吧