环境
- UI:vant-weapp
- 小程序
- mpvue
问题描述
vant-weapp
中有个组件ActionSheet 上拉菜单
,需要使用其select
方法获取用户点击选中得值,这个值在他的event.detail
中,我需要获取这个值
UI效果
html
<!-- 性别弹窗 -->
<van-action-sheet :show="sex.show" :actions="sex.actions" :cancel-text="sex.cancel" @cancel='myCancel("sex")' @select="sexSelect" />
注意这里@select="sexSelect"
配置
sex: {
show: false,
cancel: '取消',
current: '',
actions: [
{
name: '男'
},
{
name: '女'
}
]
}
函数
// 性别弹窗里面
sexSelect: function (e) {
console.log(e)
this.sex.show = false
this.sex.current = e.mp.detail.name
},
e.mp.detail.name
就能拿到用户下拉选择得值
改进需求
我不只是想获取到用户输入,我还想携带别的参数,这个坑填了好久,才找到得方法,注意这里@select="sexSelect($event,'name')"
面得$event
,必须有$
,否则拿不到,报错
<!-- 性别弹窗 -->
<van-action-sheet :show="sex.show" :actions="sex.actions" :cancel-text="sex.cancel" @cancel='myCancel("sex")' @select="sexSelect($event,'name')" />
js
// 性别弹窗里面
sexSelect: function (e, name) {
console.log(e)
console.log(name)
this.sex.show = false
this.sex.current = e.mp.detail.name
},
这样我才能拿到用户选择和携带得参数name值
上面携带参数得另外一种实现方式
<!-- 性别弹窗 -->
<van-action-sheet data-index="250" :show="sex.show" :actions="sex.actions" :cancel-text="sex.cancel" @cancel='myCancel("sex")' @select="sexSelect" />
注意:data-index="250"
,如果绑定得是属性名称,需要加:
,例如:data-index="myValue"
,index
可以改为其他名称