好资源导航 » 文章资讯 » 详解mpvue中使用vant时需要注意的onChange事件的坑

详解mpvue中使用vant时需要注意的onChange事件的坑

2023-08-23 10:45:06 81

最近用了一下VantWeapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的

1.在app.json或index.json中引入组件

"usingComponents":{
"van-collapse":"path/to/vant-weapp/dist/collapse/index",
"van-collapse-item":"path/to/vant-weapp/dist/collapse-item/index"
}

2.通过value控制展开的面板列表，activeNames为数组格式



提供多样店铺模板，快速搭建网上商城


网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失


线上拓客，随时预约，贴心顺手的开单收银

Page({
data:{
activeNames:['1']
},
onChange(event){
this.setData({
activeNames:event.detail
});
}
});

但是在mpvue里面不能直接这样引入

下面是我的代码



提供多样店铺模板，快速搭建网上商城


网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失


线上拓客，随时预约，贴心顺手的开单收银

exportdefault{
data(){
return{
activeName:'1'
}
},
methods:{
onChange(event){
console.log(event)
this.activeName=event.mp.detail
}
}
}

得把原生小程序使用方式为改为mpvue使用方式

首先是数据绑定方式

value="{{activeNames}}"

改为

v-bind:value="activeNames"
//或者
:value="activeNames"

然后是事件监听

在van-collapse组件里加个监听事件

@change="onChange($event)"

mpvue中获取event值也与原生小程序有所不同：

onChange(event){//获取表单组件filed的值
console.log(event.mp.detail)//注意加入mp
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。