場景：

移動端登入，需要簡訊驗證碼登入的使用場景
先貼一下做好的效果圖：

（1）初始效果

（2）點選後效果

（3）計時結束後效果

需求：

在這個場景裡使用者需要輸入手機號，然後點選“傳送驗證碼”關鍵字，當收到簡訊驗證碼後，輸入到接受驗證碼的控制元件中，然後點選登入。仔細想了想，這個“傳送驗證碼”有點意思，可以封裝成一個元件，那麼日後就可以給別的小夥伴用啦。
因此，再來想想“傳送驗證碼”應有的效果：
使用者點選“傳送驗證碼”，當手機號不正確或為空的時候，要提示使用者修改手機號；當手機號正確時，向後臺傳送獲取驗證碼的請求，與此同時修改顯示效果：文字變為“xxs後重發”，顏色變為灰色，點選無效果。當倒計時結束後，文字顏色恢復，且內容變為“重新發送”。

技術：

因為要封裝成一個元件，因此首先根據需求確定應該接收哪些資料，這裡很簡單，只需一個手機號作為要接收的資料，並且必須有手機號；其次是處理，當用戶點選以後，呼叫方法進行處理，首先要判斷手機號是否合理，並在不合理時給出提示，其次如果合理的話，就更改文字樣式，並且傳送請求。更改樣式中涉及到倒計時，這裡可以用setInterval來解決。當檢測到計時結束後，再次變更文字樣式；在整個過程中不涉及到改變父元件裡的資料操作。

解決方案：

分析2小時，程式碼10分鐘，不要怕麻煩，理清流程才能減少日後調BUG的次數。話不多說，我們下面就簡簡單單，封裝個小元件。

這是封裝好的元件Loading：

<
 
template>
  <div :class="className" @click="requestSMS"><span> | </span>{{count}}{{message}}</div>
</template>

<script>
export default {
  name: 'Loading',
  props: {
    // 使用者電話
    telNumber: {
      required: true
    }
  },
  data () {
    return
 
 {
      className: 'clickable',
      message: '傳送驗證碼',
      count: '',
      send: true,
      timer: null,
      reg: /^((13[0-9])|(14[5,7,9])|(15[^4])|(18[0-9])|(17[0,1,3,5,6,7,8]))\d{8}$/
    }
  },
  methods: {
    requestSMS () {
      if (this.send) {
        if (this.$props.telNumber === '' || this.$props.telNumber === undefined) {
          this.$toast('請輸手機號碼')
        } else if (!this.reg.test(this.$props.telNumber)) {
          // 核對手機號格式
          this.$toast('請輸正確的手機號碼')
        } else {
          this.send = false
          // 請求簡訊驗證碼
          console.log(this.$props.telNumber)
          console.log('開始請求資料')
          // 修改樣式
          this.className = 'unclickable'
          this.message = 's後重發'
          const TOTAL_TIME = 60
          if (!this.timer) {
            this.count = TOTAL_TIME
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TOTAL_TIME) {
                this.count--
              } else {
                clearInterval(this.timer)
                this.timer = null
                this.count = ''
                this.message = '重新發送'
                this.className = 'clickable'
                this.send = true
              }
            }, 1000)
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.clickable {
  font-family: SourceHanSansCN-Normal;
  font-size: x-small;
  color: #5474C2;
  letter-spacing: 0;
  text-align: center;
}

.unclickable {
    font-family: SourceHanSansCN-Normal;
    font-size: x-small;
    color: #B5BBC4;
    letter-spacing: 0;
    text-align: center;
}

span {
  color: #B5BBC4;
  margin-right: 3px;
}
</style>

在父元件中這樣呼叫：

<Loading :telNumber="account" style="float:right"></Loading>

這個account是在父元件中定義的一個數據，初始化為undefined型別。