You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

71 lines
2.2 KiB
Markdown

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

### liu-select适用于uni-app项目的下拉选择组件
### 本组件目前兼容微信小程序、H5
### 本组件是简单好用的下拉选择器,支持多选、单选、自定义数据格式、自定义文字和背景颜色,简单易修改
# --- 扫码预览、关注我们 ---
## 扫码关注公众号,查看更多插件信息,预览插件效果!
![](https://uni.ckapi.pro/uniapp/publicize.png)
``` html
<view @click="openAddress" class="btn">打开选择器</view>
<liu-select ref="scroll" :list="dataList" @change='chooseSuccess'></liu-select>
```
``` javascript
export default {
data() {
return {
dataList: [{
id: 1,
name: '测试1'
}, {
id: 2,
name: '测试2'
}, {
id: 3,
name: '测试3'
}, {
id: 4,
name: '测试4'
}, {
id: 5,
name: '测试5'
}, {
id: 6,
name: '测试6'
}, {
id: 7,
name: '测试7'
}], //数据源
};
},
methods: {
//打开选择器
openAddress() {
this.$refs.scroll.open()
},
//选择成功
chooseSuccess(e) {
console.log('所选择的信息:', e)
}
}
}
```
### 属性说明
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | -------------------------| ---------------|
| multiple | Boolean | true | 是否多选true:多选 false:单选)
| list | Array | [] | 选择项数据
| selectColor | String | '#FFFFFF' | 选中字体颜色
| noSelectColor | String | '#333333' | 未选中字体颜色
| selectBg | String | '#1890ff' | 选中背景色
| noSelectBg | String | '#f7f7f7' | 未选中背景色
| isMask | Boolean | true | 是否点击阴影关闭
| animation | Boolean | true | 是否开启动画
| safeArea | Boolean | true | 是否开启安全条
| @change | Function | | 选择成功回调事件