更新记录
1.0.0(2025-03-18) 下载此版本
首次发布测试
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
√ | √ | √ | √ | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
hl-uni
插件列表
Select 选择器
快速上手
安装
- 导入
hl-uni
插件 -
main.js中引入
import hlUni from '@/uni_modules/hl-uni' import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) app.use(hlUni) return { app } }
-
uni.scss中引入样式
/* hl-uni */ @use '@/uni_modules/hl-uni/styles/index.scss';
Select 选择器
Select API
Select Attributes
属性名 | 说明 | 类型 | Default |
---|---|---|---|
model-value / v-model | 选中项绑定值 | string / number / boolean |
— |
disabled | 是否禁用 | boolean |
false |
clearable | 是否可以清空选项 | boolean |
false |
placeholder | 占位符,默认为“Select” | string |
— |
placeholder-style | 占位符自定义样式 | string / object |
— |
placeholder-class | 占位符自定义class | string |
— |
options | 配置选项内容 | Array |
[] |
label-field | 作为 label 唯一标识的键名,绑定值为对象类型时必填 | string |
label |
value-field | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | string |
value |
max-height | 下拉面板的最大高度 | number |
150 |
remote | 其中的选项是否从服务器远程加载 | boolean |
false |
remote-method | 自定义远程搜索方法 | Function |
— |
loading | 是否正在从远程获取数据 | boolean |
false |
input-class | 输入框自定义class | string |
— |
popup-class | 下拉面板自定义class | string |
— |
teleport-to | 将下拉面板插入至 某个元素 | string |
#app |
offset | 下拉面板偏移量 | number |
0 |
待办
属性名 | 说明 | 类型 | Default |
---|---|---|---|
filterable | Select 组件是否可筛选 | boolean |
false |
multiple | 是否多选 | boolean |
false |
Select Events
事件名 | 说明 | Type |
---|---|---|
input | 选中值发生变化时触发 | Function |
focus | 当 input 获得焦点时触发 | Function |
blur | 当 input 失去焦点时触发 | Function |
confirm | 点击完成按钮时触发 | Function |
select | 选中下拉列表中的某个选项时触发 | Function |
Select Slots
插槽名 | 说明 | 子标签 |
---|---|---|
prefix | Select 组件头部内容 | — |
suffix | Select 组件尾部部内容 | — |
options | option 组件列表 | — |
empty | 无选项时的列表 | — |
Select Exposes
名称 | 描述 | 类型 |
---|---|---|
focus | 使选择器的输入框获取焦点 | Function |
blur | 使选择器的输入框失去焦点,并隐藏下拉框 | Function |
selectedLabel | 获取当前选中的标签 | Function |