更新记录
1.0.6(2024-05-14) 下载此版本
解决无法显示初始化值的问题
1.0.5(2024-05-14) 下载此版本
修改双向绑定的使用示例,v-model后面必须加绑定的key才能生效,至于为什么,目前还没搞清楚,真是不好意思了,如果有人直到原因可以指点一下我,为什么是v-model:value 而不是v-model
1.0.4(2024-05-06) 下载此版本
修改reques事件示例的方法名,防止误解
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
lw-simple-picker 让Picker的使用回归简单,只为简单的选择而生
- 大多数情况下,我们使用picker只需要做简单的选择,而原生的picker太过于灵活,导致变量定义非常庞大切繁琐,而且选中的索引值通常不是我们所需要的结果,于是我封装了这个组件
- 重要提示: 本组件样式基于 ColorUI ,如果你的项目使用了 ColorUI ,那么可以直接使用本组件,如果你的项目没有使用 ColorUI ,那么可能需要自己修改一下样式,以确保和原项目的UI分格保持一致,因为向右的箭头使用的是 ColorUI的字体图标 ,你可以该用UniUI的字体图标代替
- 本组件仅支持Vue3版本
lw-simple-picker是如何帮助我减少代码的
使用lw-simple-picker前
<template>
<picker
@change="bindOpenPickerChange"
class="full-height"
:value="currentOpenIndex"
range-key="label"
:range="schoolOpenList"
>
<view class="picker">
<view class="text-left" v-if="currentOpen.label">
{{currentOpen.label?currentOpen.label:"请选择"}}
</view>
<view class="text-left text-gray place-holder" v-else>
{{currentOpen.label?currentOpen.label:"请选择"}}
</view>
</view>
</picker>
</template>
<script setup>
const currentOpenIndex = ref()
const currentOpen = ref({})
const bindOpenPickerChange = (e) => {
currentOpenIndex.value = e.detail.value
if (e.detail.value) {
currentOpen.value = schoolOpenList.value[e.detail.value]
formData.showType = schoolOpenList.value[e.detail.value].value
}
}
<script>
使用lw-simple-picker后
<lw-simple-picker class="flex-auto" v-model:value="formData.openType" :options="schoolOpenList" />
参数相关说明
参数名 | 参数类型 | 参数说明 | 示例值 |
---|---|---|---|
v-model | ref变量 | 用于双向数据绑定 | const value = ref() |
params | Object | 用于request的请求参数,当params发生变化是会自动执行request事件方法 | {key:'关联的搜索值'} |
keys | Object | 用于picker的列表渲染以及获取值 | { label:"label",value:"value"} |
options | Object[] | 用于静态显示picker待选择列表 | [{label:"张三",value:1},{label:"李四",value:2}] |
placeholder | String | 没有选中值时的提示语 | "请选择" |
align | Enum(left/right/center) | 文本对齐方式 | "left" |
@change | (value,checkedData)=>void | 当picker的值发生变化时执行,value为值,checkedData为选中的对象 | - |
@request | (params,callback)=>void | 用于动态显示picker待选择列表,当params发生变化是会自动执行request事件方法 | - |
requestHandler(params,callback){
const data = await request(url,params)
callback(data)
}
全局样式flex-auto,flex布局下宽度自适应
.flex-auto {
flex: 'auto';
}