更新记录
1.0.0(2025-10-22) 下载此版本
- 下拉选择 2.通过keyName属性指定列表显示内容
平台兼容性
uni-app(3.7.1)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | √ | √ | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
概要
xy-select是一个文件选择插件,灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。
列表选择: 实现下拉选择列表
uniapp插件市场地址:https://ext.dcloud.net.cn/plugin?id=7594
支持的平台
H5、app
nvue:暂不支持,后期可能会支持,目前需要的可以自己修改源码。
使用方式
1、导入插件
该组件符合uni_modules规范,使用Hbuilderx导入插件,导入到项目根目录中的uni_modules文件夹中。
2、template中使用
uni_modules规范在项目页面中直接使用,不需要单独引入注册组件。
标准文件选择使用
<template>
<xy-select @result="result"></xy-select>
</template>
h5、app端自定义内容使用
<template>
<xy-select bg="#fff" color="#333" fontSize="16px" :list="list" keyName="name">
</xy-select>
</template>
属性说明
参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
---|---|---|---|---|---|
bg | 背景设置 | String | 否 | - | #f2f2f2 |
color | 文字颜色 | String | 否 | - | #333333 |
keyName | 对象展示属性 | String | 否 | - | name |
list | 数据列表 | Array | 否 | - | - |
fontSize | 文字大小 | String | 否 | - | 16px |
事件说明
事件名称 | 说明 | 回调参数 |
---|---|---|
@result | 列表选择后结果 | - |
温馨提示
1、该插件反复测试过h5、app-vue,vue2和vue3都兼容,其他端可能需要测试改进。
2、该插件的使用hbuilderx版本最好升级到较新版本,我开发的版本是hbuilderx3.3.11.20220209。
3、对此插件或相关问题有好的建议,可以直接在评论区进行讨论。
4、希望遇到问题不要喷,也不要骂人,其实这种心情我能理解,写该插件也不是一时半会就完成了的,所以希望互相理解。只要有问题,我会第一时间回复解决。
5、对此插件有任何问题的可以在下方留言,我会第一时间回复和解决问题。