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

分手后的思念是犯贱 2022-03-25 07:44 619阅读 0赞

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

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为数组格式

<van-collapse value="{ { activeNames }}">
      <van-collapse-item title="有赞微商城" name="1">
        提供多样店铺模板，快速搭建网上商城
      </van-collapse-item>
      <van-collapse-item title="有赞零售" name="2">
        网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
      </van-collapse-item>
      <van-collapse-item title="有赞美业" name="3" disabled>
        线上拓客，随时预约，贴心顺手的开单收银
      </van-collapse-item>
    </van-collapse>

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

但是在mpvue里面不能直接这样引入  
**下面是我的代码**

<van-collapse :value="activeNames" @change="onChange($event)">
      <van-collapse-item title="有赞微商城" name="1">
        提供多样店铺模板，快速搭建网上商城
      </van-collapse-item>
      <van-collapse-item title="有赞零售" name="2">
        网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
      </van-collapse-item>
      <van-collapse-item title="有赞美业" name="3" disabled>
        线上拓客，随时预约，贴心顺手的开单收银
      </van-collapse-item>
    </van-collapse>

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
    }

[Link 1]: https://youzan.github.io/vant-weapp/#/collapse