技術標籤：vue

VUE筆記（甲）

文章目錄

• VUE筆記（甲）
• 前言
• 一、VUE介紹
• 二、筆記內容
• • 1.before-leave
  • 2.Promise
  • 3.loading
• 總結

前言

最近做的專案用到的一些小工具小技巧

一、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' }})
            }
          }
        })
      },
}

效果

禁止選中和禁止貼上，這個功能在很多地方都可能遇到，比如確認密碼等等。

 <el-input v-model="form.passWord" clearable :disabled="isDisable" placeholder="請再次確認密碼" οncοpy="return false" οnpaste="return false" />

總結

今天就先到這吧