切换语言包,定义在 data 里,无法做到 响应式。 解决方法
- template
<button class="yzbtn" @click="getCodeVal" :disabled="disabled">{{codeName }}</button>
- js
data() {
return {
// codeName: '获取验证码', 无法响应式
name:'', // 过渡 赋值给验证码codeName
disabled: false,
clickyzm:false, // true 正在倒计时 false 倒计时结束
};
},
// 监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义.
computed: {
// codeName() {
// return this.$t('login.huoqu')
// },
codeName:{
// 设置
set(val){
console.log('验证码新的值',val);
this.name = val;
},
// 获取
get(){
let res;
if(this.clickyzm){
res = this.name;
} else {
res = this.$t('login.huoqu')
}
return res;
}
}
},
methods: {
getCodeVal() {
let num = 60;
this.disabled = true;
this.timer = setInterval(() => {
if (num > 1) {
this.clickyzm = true;
num--;
this.codeName = num + 's';
} else {
this.clickyzm = false;
this.disabled = false;
clearInterval(this.timer)
}
}, 1000)
}
}