更新记录
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事件示例的方法名,防止误解
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
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';
}