216 lines
7.7 KiB
Markdown
216 lines
7.7 KiB
Markdown
|
||
## next-search-more --搜索更多，搜索下拉，search-more
|
||
|
||
> 遇到问题或有建议可以加入QQ群(<font color=#f00>455948571</font>)反馈
|
||
> 如果觉得组件不错，<font color=#f00>给五星鼓励鼓励</font>咯！
|
||
|
||
|
||
## 使用
|
||
|
||
>[从uniapp插件市场导入](https://ext.dcloud.net.cn/plugin?name=next-search-more)
|
||
|
||
```html
|
||
<template>
|
||
<view class="index">
|
||
<view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>1. mode=more模式</text></view>
|
||
<next-search-more mode="more" :showMore="showMore" @moreClick="moreClick">
|
||
<!--以下demo你可以借助第三方的插件实现你想要的任何复杂功能-->
|
||
<template #more>
|
||
<u--form labelWidth="80" labelAlign="right">
|
||
<u-form-item label="radio:">
|
||
<u-radio-group v-model="searchForm.radio" placement="row">
|
||
<u-radio v-for="(item, index) in optionslist" :key="index" :label="item.name" :name="item.name" />
|
||
</u-radio-group>
|
||
</u-form-item>
|
||
<u-form-item label="checkbox:">
|
||
<u-checkbox-group v-model="searchForm.checkbox" placement="row">
|
||
<u-checkbox v-for="(item, index) in optionslist" :key="index" :label="item.name" :name="item.name" />
|
||
</u-checkbox-group>
|
||
</u-form-item>
|
||
<u-form-item label="rate:">
|
||
<u-rate :count="5" v-model="searchForm.rate" />
|
||
</u-form-item>
|
||
<u-form-item label="switch:">
|
||
<u-switch v-model="searchForm.switch"></u-switch>
|
||
</u-form-item>
|
||
<u-form-item label="other:">
|
||
<next-search-select
|
||
:multiple="false"
|
||
:list="options"
|
||
label-key="projectName"
|
||
value-key="id"
|
||
placeholder=" 请选择报备项目"
|
||
title="选择报备项目"
|
||
v-model:value="searchForm.projectId"
|
||
@search="searchFunc"
|
||
@change="changeCallback"
|
||
clearable
|
||
></next-search-select>
|
||
</u-form-item>
|
||
<view class="flex-row">
|
||
<u-button @click="cancel" :customStyle="{margin: '10rpx'}" text="取消"></u-button>
|
||
<u-button @click="comfirm" :customStyle="{margin: '10rpx'}" type="primary" text="确定"></u-button>
|
||
</view>
|
||
</u--form>
|
||
</template>
|
||
</next-search-more>
|
||
<view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>2. mode=common;button=outside模式</text></view>
|
||
<next-search-more mode="common" button="outside" />
|
||
<view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>3. mode=common;button=inside模式</text></view>
|
||
<next-search-more mode="common" button="inside" />
|
||
<view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>4. mode=center;button=outside模式</text></view>
|
||
<next-search-more mode="center" button="outside" />
|
||
<view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>5. mode=center;button=inside模式</text></view>
|
||
<next-search-more mode="center" button="inside" />
|
||
<view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>6. mode=center;button=inside;isFixedSearchBtn=false模式</text></view>
|
||
<next-search-more mode="center" button="inside" :isFixedSearchBtn="false" />
|
||
<view class="content-block"><text>全站ICON图标海量下载iconfont图标大全,为你优选-包图网,全站ICON图标海量下载iconfont图标大全,为你优选-包图网</text></view>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
### vue3 + ts 使用
|
||
|
||
```js
|
||
<script lang="ts">
|
||
import { ref, nextTick, toRefs, toRaw, unref, reactive } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
const showMore = ref(false)
|
||
const searchForm = reactive({
|
||
radio: '',
|
||
checkbox: '',
|
||
rate: 3,
|
||
switch: false,
|
||
projectId: ''
|
||
})
|
||
let dataLength = 0
|
||
const options = ref<any>([])
|
||
const optionslist = ref([{
|
||
name: '苹果',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '香蕉',
|
||
},
|
||
{
|
||
name: '橙子',
|
||
}
|
||
])
|
||
function cancel () {
|
||
showMore.value = false
|
||
}
|
||
function comfirm () {
|
||
showMore.value = false
|
||
}
|
||
function moreClick () {
|
||
showMore.value = !unref(showMore)
|
||
}
|
||
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}`
|
||
})
|
||
}
|
||
dataLength = unref(options).length
|
||
}
|
||
uni.hideLoading()
|
||
}, 1000)
|
||
}
|
||
function changeCallback(item) {
|
||
console.log("选中的item：", item)
|
||
}
|
||
searchFunc()
|
||
return {
|
||
showMore,
|
||
moreClick,
|
||
optionslist,
|
||
searchForm,
|
||
searchFunc,
|
||
options,
|
||
changeCallback,
|
||
comfirm,
|
||
cancel
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
.content-block {
|
||
border-radius: 20rpx;
|
||
border: 1rpx solid #ccc;
|
||
margin: 20rpx;
|
||
padding: 20rpx;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
page {
|
||
background: #ccc;
|
||
}
|
||
</style>
|
||
|
||
|
||
```
|
||
### vue2 同样支持，在这里不再写demo
|
||
|
||
### 组件按需加载
|
||
如果不需要组件全局加载，而已把组件拷贝到项目的components目录下，单独引入进来使用即可达到按需加载的效果
|
||
### 预览
|
||
|
||
***
|
||
|
||
| 功能预览 | | 项目中应用演示 |
|
||
| :--------------------------------------------------------------------------:| | :-----------------------------------------------------------------------------:|
|
||
|  | |  |
|
||
|
||
|
||
## 参数
|
||
|
||
|
||
### next-search-more Props
|
||
|
||
可选参数属性列表
|
||
|
||
|参数名 |说明 |类型 |是否必填 |默认值 |可选值 |
|
||
|---- |---- |---- |---- |---- |---- |
|
||
|mode |模式mode，支持common模式 center模式 more模式 |String |否 |common |center,more|
|
||
|button |搜索按钮的模式，支持outside模式 inside模式 |String |否 |outside |inside |
|
||
|isFixedSearchBtn |是否固定搜索按钮 |Boolean |否 |true |false |
|
||
|radius |搜索控件的radius |String, Number |否 |60 |- |
|
||
|placeholder | placeholder |String |否 |请输入搜索内容 |- |
|
||
|backgroundColor |搜索控件的背景颜色 |String |否 |#fff |- |
|
||
|showMore | mode=more模式下，用于控制打开下拉弹层 |Boolean |否 |false |true |
|
||
|border| border |String |否 |1px #f5f5f5 solid |- |
|
||
|
||
|
||
# Event 事件
|
||
|事件名 |说明 |类型 |回调参数 |
|
||
|---- |---- |---- |---- |
|
||
|input |搜索框输入事件 |emit |- |
|
||
|search|搜索触发的事件 |emit |- |
|
||
|moreClick|更多按钮点击触发事件 |emit |- |
|
||
|
||
## Slot 插槽
|
||
|
||
|名称 |说明 |参数 |
|
||
|---- |---- |---- |
|
||
|more |more插槽，在mode=more模式下用于存放下拉框内容 |无 |
|