需求：点击按钮，按钮变成灰色，同时出现倒计时10秒，10秒后变回原来的按钮
首先给按钮添加disabled属性，当绑的值为true的时候禁用
再定义一个时间值
<a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag">
<span v-if="updateDisableFlag">上报({{settimer}}")</span>
<span v-else>上报</span>
</a-button>
updateDisableFlag:false,
settimer:11,
然后在方法中设定时器，最重要的其实也就是定时器。当settimer==1的时候不禁用按钮，并且时间值回到原始，清除定时器。当settimer！==1的时候禁用按钮，时间减减。
reportBtn() {
let that = this
if(that.settimer==1){
that.updateDisableFlag = false
that.settimer = 11
return false
}else{
that.updateDisableFlag = true
that.settimer--;
setTimeout(function(){
that.reportBtn()
},1000)
朋友分享了另一种写法，亲测有效，标准的清除定时器
reportBtn() {
let that = this
let timer = setInterval(function(){
that.updateDisableFlag = true
that.settimer--;
if(that.settimer==0){
clearInterval(timer)
that.updateDisableFlag = false
that.settimer = 11
},1000)
需求：点击按钮，按钮变成灰色，同时出现倒计时10秒，10秒后变回原来的按钮首先给按钮添加disabled属性，当绑的值为true的时候禁用再定义一个时间值 <a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag"> <span v-if="updateDisableFlag">上报({{settimer}}")</span>.
使用文档： :
常见问题： ://iczer.gitee.io/vue-antd-admin-docs/start/faq.html
国内知名： ://gitee.com/iczer/vue-antd-admin
浏览器支持
现代浏览器及IE10
IE浏览器/边缘
火狐浏览器
Chrome
苹果浏览器
IE10，Edge
最近2个版本
最近2个版本
最近2个版本
最近2个版本
$ git clone https://github
最近在研究 Android 12 源码的时候发现 View 里多了一个有意思的属性 allowClickableWhenDisabled：允许 disabled 状态下点击。
简单唠唠这个简单明了的小更新。
未点击**“同意”隐私条款的情况下点击“开始”** 按钮 的话，App 会弹出需要勾选的说明或者抖动复选框来加以提示。无论是作为用户还是开发者，对于这种设计应该都不陌生。
开发人员要实现这个小功能的话，简单来说监听勾选情况，适时更新 Button 的 disabled 状态就可以了。但这样一来，当 .
1： a-button: 按钮组： 按钮样式： 按钮有五种样式：
主按钮样式： type="primary" 次按钮样式： type="default" 虚线按钮： type="dash" 警告按钮： type= "danger" 连接按钮： type="link";
<a-button type="primary">
Primary
</a-button...
在 ant-
design-
vue 中，表单组件的使用方式和
antd（Ant
Design for React）类似，但是有些差异。其中，a-form-model 并不存在于 ant-
design-
vue 中。相反，ant-
design-
vue 提供了 a-form 和 a-form-item 两个组件来实现表单的双向绑定。
a-form 组件是最基本的表单组件，用于包裹整个表单，它可以接收一个 model 属性，用于绑定表单数据。a-form-item 组件用于包裹具体的表单项，例如输入框、下拉框、单选框等等。a-form-item 组件也可以接收一个 model 属性，用于绑定表单中该项的数据。
以下是一个简单的 ant-
design-
vue 表单示例：
<template>
<a-form :model="form" :rules="rules">
<a-form-item label="用户名" prop="username">
<a-input v-model="form.username" />
</a-form-item>
<a-form-item label="密码" prop="password">
<a-input v-model="form.password" type="password" />
</a-form-item>
<a-form-item>
<a-
button type="primary" @click="submitForm">提交</a-
button>
</a-form-item>
</a-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过，提交表单数据
console.log(this.form)
} else {
// 表单验证失败
console.log('error submit!!')
return false
</script>
在这个示例中，我们使用了 a-form 和 a-form-item 组件来实现表单的双向绑定，并使用了 rules 属性来定义表单验证规则。在提交表单时，我们使用了 $refs.form.validate 方法来验证表单数据是否符合规则。
