uni-app 自定义下拉选择列表

效果图:uni-app 自定义下拉选择列表_第1张图片

1.自定义组件ChoiceSelected.vue

uni-app 自定义下拉选择列表_第2张图片

2.组件代码:


 

3.调用与注册组件

uni-app 自定义下拉选择列表_第3张图片

子组件中参数传递的方法

uni-app 自定义下拉选择列表_第4张图片

 在子组件中的_this.$emit("onChoiceClick",position)必须与父vue中@调用名称一致。

uni-app 自定义下拉选择列表_第5张图片

 参数说明:

属性 默认值/类型 说明
isShowChoice false/boolean 是否显示下拉类表数据
choiceIndex 0/int 下拉类表数据,选择位置
choiceContent “请选择”/String 选择的内容
choiceList 自定义/数组 下拉类表数据

4.父vue的代码:


 

Demo

以上就是完成自定义下拉列表组件的所有代码,有什么问题或需要改进的可以留言共同探讨...

你可能感兴趣的:(vue,vue.js,uni-app,前端)