VUE Element UI 60秒倒计时
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<!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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)