更新记录

1.0.2（2023-07-18）

no message

1.0.1（2023-07-18）

新增readme

1.0.0（2023-07-18）

发布到插件市场

平台兼容性

wThreePicker 三级联动选择器

组件名：w-three-picker

由于内置组件picker 的滚动和手动改变节点的麻烦，因此封装一个数据驱动的弹窗式的三列级联选择器，轻巧易用、无三方依赖、多配置。组件传参命名与uni统一好理解。无广告和有示例项目。

安装

该组件符合easycom规范，导入uni_modules中方可直接使用。

基本用法

template中使用。

<w-three-picker
    ref="picker1"
    :title="['省', '市', '区']"
    :localdata="provinces"
    v-model="value1"
    @confirm="confirm1"
    @nodeclick="nodeclick"
    :is-mask-click="false"
    :show-cancel="true"
    text-field="name"
    value-field="code"
></w-three-picker>

<w-three-picker
    ref="picker2"
    :title="['年级', '班级', '人物']"
    :localdata="options"
    v-model="value2"
    @cancel="closed"
    @maskClick="closed"
    @confirm="confirm2"
    :is-mask-click="true"
    :show-cancel="false"
    color="#edbd43"
></w-three-picker> 

通过this.$refs['picker1'].show()方法弹出组件。

详细配置

配置

wThreePicker Props

wThreePicker Events

wThreePicker Method

其他

• 确定按钮是否变亮能够点击，取决于级联数据是否还有子节点，若已选中最后一级则按钮变亮。否则点击无效。
• 组件样式没有scoped限制，若需要覆盖能在App.vue style中声明类名覆盖。
• 组件内获取uni.getLocale() 判断按钮语言，非zh-Hans显示英文Confirm、Cancel。

创作不易，如果对你有帮助，希望能到github点个Star，感谢。