mpvue中使用vant时需要注意onChange事件的示例分析
小编给大家分享一下mpvue中使用vant时需要注意onChange事件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联专注于费县企业网站建设,成都响应式网站建设公司,成都做商城网站。费县网站建设公司,为费县等地区提供建站服务。全流程按需求定制设计,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
最近用了一下Vant Weapp组件库,但是由于我是用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里面不能直接这样引入
下面是我的代码
提供多样店铺模板,快速搭建网上商城 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失 线上拓客,随时预约,贴心顺手的开单收银
export default { 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 }
以上是“mpvue中使用vant时需要注意onChange事件的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章题目:mpvue中使用vant时需要注意onChange事件的示例分析
文章网址:http://scyanting.com/article/ppjedg.html