wechat-drop-down
v1.0.4
Published
A versatile drop-down selection component designed for WeChat Mini Programs. It offers a user-friendly interface for selecting from a list of options, complete with customizable styles and behaviors to fit various use cases within your mini program.
Downloads
8
Maintainers
lahsdbReadme
介绍
仅供微信小程序使用的下拉框组件
使用方式
npm install wechat-drop-down引入 wechat-drop-down/select
.json
{
"usingComponents": {
"select":"wechat-drop-down/index"
}
}传参
| 参数 | 字段 | 类型 | 默认值 | 介绍 | | ------------- | ------------------------- | ------ | ---------------------- | ----------------------------------------------------------- | | selectList | [{id: 1, text: '甜甜圈'}] | Array | [] | 下拉框数据 注意: 字段必须一致 | | placeholder | placeholder | String | '请选择内容' | 默认显示的内容 | | newName | newName | String | '' | 选择值的 id | | newID | newID | Number | null | 选择的值, newName 优先级大于 placeholder | | selectBorder | selectBorder | String | #ededed | 边框颜色 | | selectBRadius | selectBRadius | Number | 16 | 边框圆角,单位 rpx | | textColor | textColor | String | rgba(141, 144, 166, 1) | 文字颜色 | | textSize | textSize | Number | 25 | 文字大小,单位 rpx | | icon | icon | String | '' | icon | | iconSize | iconSize | Number | 48 | icon 大小,单位 rpx | | isInput | isInput | Boolean | false | 是否可以输入 | | selectiBg | selectiBg | String | #ffffff | 选择框背景色 | | exterior | exterior | Boolean | true | 点击外部是否可以关闭下拉菜单 |
回调
.wxml
<select bind:handleChange="handleChange" />
.js
handleChange({detail}) {
// 返回 selectiVal selectiID
// 选择的值 选择值的id
console.log(detail);
},