更新记录

1.0.0（2025-05-29） 下载此版本

初始化

平台兼容性

uni-app

其他

deary-search

Fork: next-search-more

使用

<template>
  <view class="index">
    <view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>1. mode=more模式</text></view>
    <deary-search 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>
          <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>
    </deary-search>
    <view style="padding: 10px 0;background-color:#000000;color: #fff;font-size: 13px;"><text>2. mode=common;button=outside模式</text></view>
    <deary-search 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>
    <deary-search 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>
    <deary-search 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>
    <deary-search 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
    >
    <deary-search mode="center" button="inside" :isFixedSearchBtn="false" />
    <view class="content-block">
      <text>全站ICON图标海量下载iconfont图标大全,为你优选-包图网,全站ICON图标海量下载iconfont图标大全,为你优选-包图网</text>
    </view>
  </view>
</template>

vue3 + ts 使用

<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>

参数

deary-search Props

可选参数属性列表

Event 事件

Slot 插槽