随心流量卡推广分销网站源码 多功能的号卡推广分销管理系统 - 分销系统单店版本源码

<p align="center"> <a href="https://github.com/liub1934/uni-lb-picker"> <img src="https://img.shields.io/github/stars/liub1934/uni-lb-picker"> </a> <a href="https://github.com/liub1934/uni-lb-picker/fork"> <img src="https://img.shields.io/github/forks/liub1934/uni-lb-picker"> </a> <a href="https://github.com/liub1934/uni-lb-picker/issues"> <img src="https://img.shields.io/github/issues/liub1934/uni-lb-picker"> </a> <a href="https://www.npmjs.com/package/uni-lb-picker"> <img src="https://img.shields.io/npm/v/uni-lb-picker"> </a> <a href="https://npmcharts.com/compare/uni-lb-picker?minimal=true"> <img src="https://img.shields.io/npm/dm/uni-lb-picker"> </a> <a href="https://standardjs.com"> <img src="https://img.shields.io/badge/code%20style-standard-brightgreen"> </a> <a href="https://github.com/liub1934/uni-lb-picker/blob/master/LICENSE"> <img src="https://img.shields.io/github/license/liub1934/uni-lb-picker"> </a> </p> 插件市场里面的 picker 选择器不满足自己的需求，所以自己写了一个简单的 picker 选择器，可扩展、可自定义，一般满足日常需要。 Github：[点击前往](https://github.com/liub1934/uni-lb-picker) 插件市场：[点击前往](https://ext.dcloud.net.cn/plugin?id=1111) H5 Demo：[点击预览](https://github.liubing.me/uni-lb-picker) > 如果问题最好去 github 反馈，插件市场评论区留下五星好评即可， [点我去反馈](https://github.com/liub1934/uni-lb-picker/issues/new) > 最好提供一下使用的什么端，数据结构及大概的代码，我好复现找问题，不要直接提`怎么xxx报错了`等没意义的问题，神仙也不知道你为啥报错了。 > **由于之前`cancel`拼写失误，写成了`cancle`，`v1.08`现已修正，如果之前版本有使用`cancel`事件的，更新后请及时修正。** ## 兼容性 App + Nvue + H5 + 各平台小程序（快应用及 360 未测试） ## 功能 - 单选 - 多级联动，非多级联动，理论支持任意级数 - 省市区选择，基于多级联动 - 日期选择器，年月日时分秒可自由组合选择（引入了`dayjs`方便处理日期） - 自定义选择器头部确定取消按钮颜色及插槽支持 - 选择器可视区自定义滚动个数 - 自定义数据字段，满足不同人的需求 - 自定义选择器样式 - formatter 格式化自定义显示 - 单选及非联动选择支持扁平化的简单数据，如下形式： ```javascript // 单选列表 list1: ['选项1', '选项2', '选项2'], // 非联动选择列表 list2: [ ['选项1', '选项2', '选项3'], ['选项11', '选项22', '选项33'], ['选项111', '选项222', '选项333'] ] ``` ## 引入插件 单独引入，在需要使用的页面上 import 引入即可 ```html <template> <view> <lb-picker></lb-picker> </view> </template> <script> import LbPicker from '@/components/lb-picker' export default { components: { LbPicker } } </script> ``` 全局引入，`main.js`中 import 引入并注册即可全局使用 ```jsvascript import LbPicker from '@/components/lb-picker' Vue.component("lb-picker", LbPicker) ``` easycom 引入（推荐使用此方式） `pages.json`加上如下配置： ```json "easycom": { "autoscan": true, "custom": { "lb-picker": "@/components/lb-picker/index.vue" } } ``` npm 安装引入： ```shell npm install uni-lb-picker ``` ```jsvascript import LbPicker from 'uni-lb-picker' ``` ## 选择器数据格式 ### 单选 常规数据 ```javascript list: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' } ] ``` 扁平化简单数据 ```javascript list: ['选项1', '选项2'] ``` ### 多级联动 ```javascript list: [ { label: '选项1', value: '1', children: [ { label: '选项1-1', value: '1-1', children: [ { label: '选项1-1-1', value: '1-1-1' } ] } ] } ] ``` ### 非联动选择 常规数据 ```javascript list: [ [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ], [ { label: '选项11', value: '11' }, { label: '选项22', value: '22' }, { label: '选项33', value: '33' } ], [ { label: '选项111', value: '111' }, { label: '选项222', value: '222' }, { label: '选项333', value: '333' } ] ] ``` 扁平化简单数据 ```javascript list: [ ['选项1', '选项2', '选项3'], ['选项11', '选项22', '选项33'], ['选项111', '选项222', '选项333'] ] ``` ## 调用显示选择器 通过`ref`形式手动调用`show`方法显示，隐藏同理调用`hide` ```html <lb-picker ref="picker"></lb-picker> ``` ```javascript this.$refs.picker.show() // 显示 this.$refs.picker.hide() // 隐藏 ``` `v1.1.3`新增，将需要点击的元素包裹在`lb-picker`中即可。 ```html <lb-picker> <button>点我直接打开选择器</button> </lb-picker> ``` ## 绑定值及设置默认值 支持 vue 中`v-model`写法绑定值，无需自己维护选中值的索引。 ```javascript <lb-picker v-model="value1"></lb-picker> <lb-picker v-model="value2"></lb-picker> <lb-picker v-model="value3"></lb-picker> data () { return { value1: '', // 单选 value2: [], // 多列联动选择 value2: '2021-01-05', // 日期，设置一个具体的日期，留空则默认选中当前日期 } } ``` ## 多个选择器 通过设置不同的`ref`，然后调用即可 ```javascript <lb-picker ref="picker1"></lb-picker> <lb-picker ref="picker2"></lb-picker> this.$refs.picker1.show() // picker1显示 this.$refs.picker2.show() // picker2显示 ``` ## 省市区选择 省市区选择是基于多列联动选择，数据来源：[https://github.com/modood/Administrative-divisions-of-China](https://github.com/modood/Administrative-divisions-of-China)， 省市区文件位于`/pages/demos/area-data-min.js`，自行引入即可，可参考`demo3省市区选择`， 也可使用自己已有的省市区数据，如果数据字段不一样，也可以自定义，参考下方自定义数据字段。 ## 自定义数据字段 为了满足不同人的需求，插件支持自定义数据字段名称， 插件默认的数据字段如下形式： ```javascript list: [ { label: '选择1', value: 1, children: [] }, { label: '选择1', value: 1, children: [] } ] ``` 如果你的数据字段和上面不一样，如下形式： ```javascript list: [ { text: '选择1', id: 1, child: [] }, { text: '选择1', id: 1, child: [] } ] ``` 通过设置参数中的`props`即可，如下所示： ```javascript <lb-picker :props="myProps"></lb-picker> data () { return { myProps: { label: 'text', value: 'id', children: 'child' } } } ``` ## 插槽使用 选择器支持一些可自定义化的插槽，如选择器的取消和确定文字按钮，如果需要对其自定义处理的话，比如加个 icon 图标之类的，可使用插槽，使用方法如下： ```html <lb-picker> <view slot="cancel-text">我是自定义取消</view> <view slot="confirm-text">我是自定义确定</view> </lb-picker> ``` 也可参考示例中的`demo5`，自定义插槽元素样式交给开发者自由调整，插槽仅提供预留位置。 其他插槽见下。 ## 参数及事件 ### Props #### 通用 Props | 参数 | 说明