VUE Element UI 60秒倒計時
阿新 • • 發佈:2019-01-07
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <el-container id='app'> <el-button @click="sendMsg" type="primary" :disabled="isDisabled">{{buttonName}}</el-button> </el-table> </el-container> </body> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入元件庫 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: { buttonName: "傳送簡訊", isDisabled: false, time: 10 }, methods: { sendMsg() { let me = this; me.isDisabled = true; let interval = window.setInterval(function() { me.buttonName = '(' + me.time + '秒)後重新發送'; --me.time; if(me.time < 0) { me.buttonName = "重新發送"; me.time = 10; me.isDisabled = false; window.clearInterval(interval); } }, 1000); } } }) </script> </html>