Vue.js（讀音 /vju?/, 類似于 view）是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。
摘要:
1、該組件基于Vue 2.1.X版本；
1、 Vue 組件代碼如下：
Vue.component('timerBtn',{ template: '<button v-on:click="run" :disabled="disabled || time > 0">{{ text }}</button>', props: { second: { type: Number, default: 60 }, disabled: { type: Boolean, default: false } }, data:function () { return { time: 0 } }, methods: { run: function () { this.$emit('run'); }, start: function(){ this.time = this.second; this.timer(); }, stop: function(){ this.time = 0; this.disabled = false; }, setDisabled: function(val){ this.disabled = val; }, timer: function () { if (this.time > 0) { this.time--; setTimeout(this.timer, 1000); }else{ this.disabled = false; } } }, computed: { text: function () { return this.time > 0 ? this.time + 's 后重獲取' : '獲取驗證碼'; } }});2、使用方式：
<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" :disabled="disabled" :second="60"></timer-btn>
disabled 建議不要綁定，我們可以通過調用組件的setDisabled方法來切換按鈕可用狀態；
second 初始值60s 沒特別值可以不綁定；
所以我們可以在HTML頁面這樣：
<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" ></timer-btn>
JS這樣：
var vm = new Vue({ el:'#app', methods:{ sendCode:function(){ vm.$refs.timerbtn.setDisabled(true); //設置按鈕不可用 hz.ajaxRequest("sys/sendCode?_"+$.now(),function(data){ if(data.status){ vm.$refs.timerbtn.start(); //啟動倒計時 }else{ vm.$refs.timerbtn.stop(); //停止倒計時 } }); }, }});以上所述是小編給大家介紹的Vue 短信驗證碼組件開發詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
