click点击事件不生效,没有反应?vant UI组件.
编译后click事件触发不了事件 ,需要关掉开发者工具再开才能点击, 调试基础库:2.15.0 环境:mac Big Sur 11.6 启动时会报一个警告: [图片] 代码如下 : <view class="container">
<van-toast id="van-toast" />
<van-icon size="88px" name="friends-o" />
<text>爆爆奢助手</text>
<view class="page-section">
<view class="flex-wrp" style="flex-direction:column;">
<van-cell-group>
<van-field class="flex-item flex-item-V" model:value="{{ mobile }}" label="手机号" placeholder="请输入手机号"/>
<van-field class="flex-item flex-item-V" model:value="{{ code }}" center clearable label="短信验证码" placeholder="请输入短信验证码">
<van-button slot="button" color="rgb(51,51,51)" size="small" loading="{{codeLoading}}" loading-text="{{ConfirmCodeTime}}" type="primary" bind:click="sendConfirmCode">
发送验证码
</van-button>
</van-field>
<van-row class="login-btn">
<van-col offset="6" span="12">
<van-button color="rgb(51,51,51)" hairline round type="primary" block size="normal" bind:click="login" loading="{{loginLoading}}">
登陆
</van-button>
</van-col>
</van-row>
</van-cell-group>
</view>
</view>
</view>
// pages/login/login.ts
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast'
import { request } from '../../utils/request'
Page({
/**
* 页面的初始数据
*/
data: {
mobile: '',
code: '',
codeLoading: false,
ConfirmCodeTime: '',
loginLoading:false,
waitCode:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
console.log('onLoad')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log('onReady')
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
wx.hideHomeButton()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
test(){
console.log('test')
},
sendConfirmCode() {
console.log('sendConfirmCode')
if (!this.data.mobile) return Toast.fail('请填写手机号');
console.log('sendConfirmCode')
let time = 60
const timeStop = setInterval(() => {
const next = time--
this.setData({ ConfirmCodeTime: next + '秒后重发' })
console.log(next)
if (next > 0) {
this.setData({ codeLoading: true })
} else {
clearInterval(timeStop);
this.setData({ codeLoading: false })
}
}, 1000)
this.setData({waitCode:timeStop})
request('login/send-code', 'POST', { mobile: this.data.mobile })
.then(async () => wx.showToast({
title: '请查收验证码短信',
icon: 'none',
duration: 5000
})).catch(() => {
clearInterval(timeStop)
this.setData({ codeLoading: false })
})
},
login() {
console.log('login')
if (!this.data.mobile) return Toast.fail('请填写手机号');
if (!this.data.code) return Toast.fail('请填写验证码');
this.setData({ loginLoading: true })
request('login/login', 'POST', {
mobile: this.data.mobile,
code: this.data.code
}).then(async (data) => {
wx.showToast({
title: '登录成功',
icon: 'none',
duration: 5000
});
clearInterval(this.data.waitCode);
wx.setStorageSync('me2', data);
wx.redirectTo({ url: '/pages/index/index' });
})
.finally(() => this.setData({ loginLoading: false }));
}
})
