155 lines
5.7 KiB
Markdown
155 lines
5.7 KiB
Markdown
|
|
|||
|
|
## next-search-select --下拉多选，单选，搜索
|
|||
|
|
|
|||
|
|
> 遇到问题或有建议可以加入QQ群(<font color=#f00>455948571</font>)反馈
|
|||
|
|
> 如果觉得组件不错，<font color=#f00>给五星鼓励鼓励</font>咯！
|
|||
|
|
|
|||
|
|
### 如果有使用问题请加群
|
|||
|
|
|
|||
|
|
注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合；
|
|||
|
|
[点击链接加入群聊前端开发（uniapp插件）】](https://qm.qq.com/q/S1bJzQfJAG)
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
>[从uniapp插件市场导入](https://ext.dcloud.net.cn/plugin?name=next-search-select)
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<view class="title"><text>1. 单选模式：</text></view>
|
|||
|
|
<view class="item">
|
|||
|
|
<next-search-select
|
|||
|
|
:multiple="false"
|
|||
|
|
:list="options"
|
|||
|
|
label-key="projectName"
|
|||
|
|
value-key="id"
|
|||
|
|
placeholder=" 请选择报备项目"
|
|||
|
|
title="选择报备项目"
|
|||
|
|
v-model:value="projectId"
|
|||
|
|
@search="searchFunc"
|
|||
|
|
@change="changeCallback"
|
|||
|
|
clearable
|
|||
|
|
></next-search-select>
|
|||
|
|
</view>
|
|||
|
|
<view class="title"><text>2. 多选模式：</text></view>
|
|||
|
|
<view class="item">
|
|||
|
|
<next-search-select
|
|||
|
|
:multiple="true"
|
|||
|
|
:list="options"
|
|||
|
|
label-key="projectName"
|
|||
|
|
value-key="id"
|
|||
|
|
placeholder=" 请选择报备项目"
|
|||
|
|
title="选择报备项目"
|
|||
|
|
v-model:value="projectIds"
|
|||
|
|
@search="searchFunc"
|
|||
|
|
@change="changeCallback"
|
|||
|
|
clearable
|
|||
|
|
></next-search-select>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### vue3 + ts 使用
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import {ref, unref} from "vue"
|
|||
|
|
|
|||
|
|
const options = ref<any>([])
|
|||
|
|
// 单选模式下绑定的值是字符串
|
|||
|
|
const projectId = ref("")
|
|||
|
|
// 多选模式值必须是数值类型
|
|||
|
|
const projectIds = ref([])
|
|||
|
|
let dataLength = 0
|
|||
|
|
|
|||
|
|
function searchFunc(val?) {
|
|||
|
|
console.log("搜索的关键字：", val)
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '请稍后...',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
// 模拟ajax请求
|
|||
|
|
setTimeout(() => {
|
|||
|
|
options.value = []
|
|||
|
|
dataLength = 0
|
|||
|
|
if (dataLength < 40) {
|
|||
|
|
for (let i = 0; i < 40; i++) {
|
|||
|
|
options.value.push({
|
|||
|
|
id: `id-${val ? val + '-' : ''}${dataLength + i}`,
|
|||
|
|
projectName: `项目item-${val ? val + '-' : ''}${dataLength + i}`,
|
|||
|
|
ohterKey: `test-${i}`,
|
|||
|
|
disabled: i%2 === 0
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
dataLength = unref(options).length
|
|||
|
|
}
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}, 1000)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
function changeCallback(item) {
|
|||
|
|
console.log("选中的item：", item)
|
|||
|
|
}
|
|||
|
|
searchFunc()
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.title {
|
|||
|
|
color: #f9ae3d;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
padding: 20rpx 10rpx;
|
|||
|
|
background-color: #333;
|
|||
|
|
}
|
|||
|
|
.item {
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
border: 1rpx solid #ccc;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
### vue2 同样支持，在这里不再写demo
|
|||
|
|
|
|||
|
|
### 组件按需加载
|
|||
|
|
如果不需要组件全局加载，而已把组件拷贝到项目的components目录下，单独引入进来使用即可达到按需加载的效果
|
|||
|
|
### 预览
|
|||
|
|
|
|||
|
|
***
|
|||
|
|
|
|||
|
|
| 功能预览 |
|
|||
|
|
| :--------------------------------------------------------------------------:|
|
|||
|
|
|  |
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 参数
|
|||
|
|
|
|||
|
|
|
|||
|
|
### next-search-select Props
|
|||
|
|
|
|||
|
|
可选参数属性列表
|
|||
|
|
|
|||
|
|
|参数名 |说明 |类型 |是否必填 |默认值 |可选值 |
|
|||
|
|
|---- |---- |---- |---- |---- |---- |
|
|||
|
|
|showSearch |是否显示搜索框 |Boolean |否 |true |false |
|
|||
|
|
|value |v-model v-model:value 绑定值 |Number, String, Array, Object |是 |"" |- |
|
|||
|
|
|placeholder |搜索框placeholder |String |否 |"" |- |
|
|||
|
|
|multiple |是否多选 |Boolean |否 |false |true |
|
|||
|
|
|list | 列表值 |Array |是 |[] |- |
|
|||
|
|
|valueKey |list列表绑定的value关键属性key |String |否 |value |- |
|
|||
|
|
|labelKey |list列表绑定的label(显示)关键属性key |String |否 |label |- |
|
|||
|
|
|disabledKey |list列表绑定的disabled(显示)关键属性key |String |否 |disabled |- |
|
|||
|
|
|disabled| disabled |Boolean |否 |false |true |
|
|||
|
|
|emptyText |重置按钮文本text |String |否 |重置 |- |
|
|||
|
|
|title |弹层标题 |String |否 |选择内容 |- |
|
|||
|
|
|confirmText |确定按钮文本text |String |否 |确定 |- |
|
|||
|
|
|color |文字颜色 |String |否 |#000000 |- |
|
|||
|
|
|selectColor |激活颜色 |String |否 |#f9ae3d |- |
|
|||
|
|
|bgColor |弹层背景颜色 |String |否 |#ffffff |- |
|
|||
|
|
|selectBgColor |激活项背景颜色 |String |否 |#ffffff |- |
|
|||
|
|
|showSearchBtn |是否显示搜索按钮 |Boolean |否 |true |false |
|
|||
|
|
|showArrow |是否显示右指示箭头 |Boolean |否 |true |false |
|
|||
|
|
|
|||
|
|
|
|||
|
|
# Event 事件
|
|||
|
|
|事件名 |说明 |类型 |回调参数 |
|
|||
|
|
|---- |---- |---- |---- |
|
|||
|
|
|confirm|点击确定触发事件 |emit |- |
|
|||
|
|
|change|change |emit |- |
|
|||
|
|
|visibleChange|弹层改变触发 |emit |- |
|