vue
<button class="getCode" :disabled="isBtnDisable" @click="getCode">{{ codeText }}</button>
// 组件数据
data() {
return {
codeText: '获取验证码',
isBtnDisable: false
}
},
// 组件方法
methods: {
// 发送验证码
getCode() {
let i = 60
this.isBtnDisable = true
let timer = setInterval(() => {
this.codeText = i + '秒后重新获取'
if (i === 0) {
this.codeText = '重新获取'
this.code = ''
this.isBtnDisable = false
clearInterval(timer)
}
i--
}, 1000)
let data = {
phone: this.phone,
}
XXXX接口名称XXXX(data).then(res => {
if (res.success) {
this.$toast.success(res.data)
} else {
this.$toast(res.errorMessage)
}
})
}
}
小程序
<button bindtap="getCodeFn" disabled="{{isBtnDisable}}" class="getCode">{{codeText}}</button>
data: {
phone:'',
codeText: "获取验证码",
isBtnDisable:false
},
// 获取验证码
async getCodeFn() {
let i = 60;
this.setData({
isBtnDisable:true
})
let timer = setInterval(() => {
this.setData({
codeText: i + "秒后重新获取",
})
if (i === 0) {
this.setData({
codeText: '重新获取',
code: " ",
isBtnDisable:false
})
clearInterval(timer);
}
i--
}, 1000)
let data = {
phone: this.data.phone,
}
const res = await $api.XXX接口名XXXX(data)
},
附:标签自适应文字宽度
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;