前端框架
Vue.js
ElementUI

Vue+element整合按钮禁用5秒怎么弄呀?

关注者
4
被浏览
6,670

3 个回答

你指的应该是一个按钮点击之后，禁用5秒吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style></style>
</head>

<body>
<div id="example-6">
<button :disabled="flag" @click="onClick">点我</button>
</div>
<script src=" cdn.jsdelivr.net/npm/vu "></script>
<script type="text/javascript">
new Vue({
el: "#example-6",
data: {
flag: false,
// 使按钮可用
},
methods: {
onClick() {
// 事件
alert("1秒内禁用");
// 让按钮不可用
this.flag = true;
// 设置定时器，1秒后，按钮可用
setTimeout(() => {
this.flag = false;
}, 1000);
},
},
});
</script>
</body>
</html>

用事件，在点击事件里添加禁用样式，然后设置几秒后删掉样式，用数据更新的话会触发dom更新。