<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
| 参数 | 说明
没有合适的资源?快使用搜索试试~ 我知道了~
基于uniapp+Vuex的残疾人婚恋APP源码.zip
共549个文件
vue:154个
md:104个
json:90个
需积分: 9 1 下载量 162 浏览量
2022-10-24
16:41:26
上传
评论 1
收藏 4.22MB ZIP 举报
温馨提示
基于uniapp+Vuex的残疾人婚恋APP,基于Vuejs+ElementUI+Echarts的后台管理系统
资源详情
资源评论
资源推荐
收起资源包目录
基于uniapp+Vuex的残疾人婚恋APP源码.zip (549个子文件)
uniicons.css 8KB
login.css 2KB
mescroll-down.css 1KB
mescroll-down.css 1KB
mescroll-down.css 1KB
iconfont.css 947B
mescroll-up.css 918B
mescroll-up.css 917B
mescroll-body.css 794B
mescroll-uni.css 712B
iconfont.css 591B
customicons.css 404B
.gitignore 83B
.gitkeep 0B
index.html 672B
img.jpg 129KB
activity1.jpg 84KB
2.jpg 77KB
activity4.jpg 63KB
activity2.jpg 42KB
activity3.jpg 36KB
1.jpg 35KB
content.jpg 34KB
sky.jpg 32KB
content2.jpg 18KB
3.jpg 9KB
area-data-min.js 176KB
index.js 108KB
mescroll-uni.js 32KB
icons.js 26KB
calendar.js 24KB
uni-data-picker.js 13KB
validate.js 12KB
index.js 11KB
Request.js 11KB
util.js 10KB
util.js 8KB
render.js 7KB
bindingx.js 6KB
dayjs.min.js 6KB
mpother.js 5KB
choose-and-upload-file.js 4KB
my.js 4KB
mixins.js 4KB
mpalipay.js 4KB
date-format.js 4KB
custom-parse-format.min.js 3KB
utils.js 3KB
createAnimation.js 3KB
service.js 3KB
tools.js 3KB
renderjs.js 3KB
mescroll-uni-option.js 2KB
mescroll-uni-option.js 2KB
utils.js 2KB
index.js 2KB
utils.js 2KB
tip.js 2KB
mescroll-more.js 2KB
mescroll-uni-option.js 2KB
mescroll-mixins.js 2KB
mescroll-more-item.js 2KB
buildURL.js 2KB
mpwxs.js 1KB
common.js 1KB
object-support.min.js 1KB
mescroll-comp.js 1KB
webSocket.js 1KB
keypress.js 1KB
keypress.js 1KB
keypress.js 1KB
keypress.js 1KB
keypress.js 1KB
recomment.js 1KB
message.js 1KB
user.js 1KB
comment.js 909B
index.js 815B
main.js 802B
buildFullPath.js 681B
common.js 677B
isAbsoluteURL.js 556B
webSocket.js 515B
around.js 485B
config.service.js 474B
popup.js 418B
combineURLs.js 375B
index.js 369B
auth.js 355B
share.js 352B
isPC.js 311B
constants.js 301B
mescroll-i18n.js 299B
care.js 295B
search.js 242B
filter.js 242B
other.js 229B
index.js 226B
index.js 226B
index.js 162B
共 549 条
- 1
- 2
- 3
- 4
- 5
- 6
Java程序员-张凯
- 粉丝: 1w+
- 资源: 6649
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0