更新记录

1.0.1（2024-03-20）

调整文档

1.0.0（2024-03-20）

初次发布

平台兼容性

u-remote-search-select

因为组件里面用到了官方的"uni-easyinput","uni-data-checkbox", "uni-icons"，这三个组件，所以需要引入到uni_modules里面

示例

<template>
  <!-- 加载远程数据 -->

  <!-- 多选 -->
  <u-remote-select  class="myClass" ref="remoteRef1" v-model="pSearchText1" multiple placeholder="请输入或选择物料名称" :loading="loading" :remote-method="getRemoteSelectListData" :placeholderStyle="placeholderStyle" :disabled="disabled"></u-remote-select>
  <!-- 单选 -->
  <u-remote-select  class="myClass"  ref="remoteRef2" v-model="pSearchText2" placeholder="请输入或选择物料名称" :loading="loading" :remote-method="getRemoteSelectListData" :placeholderStyle="placeholderStyle" :disabled="disabled"></u-remote-select>

  <!-- 加载本地数据 -->

  <!-- 多选 -->
  <u-remote-select  class="myClass"  ref="localRef1" v-model="pSearchText3" multiple placeholder="请输入或选择物料名称" :local-data="selectData" :placeholderStyle="placeholderStyle" :disabled="disabled"></u-remote-select>
  <!-- 单选 -->
  <u-remote-select  class="myClass"  ref="localRef2" v-model="pSearchText4" placeholder="请输入或选择物料名称"  :local-data="selectData" :placeholderStyle="placeholderStyle" :disabled="disabled"></u-remote-select>
</template>

<script setup>
    import { ref, reactive, computed, getCurrentInstance, watch, onMounted, defineExpose } from 'vue'

    const pSearchText1 = ref([])
    const pSearchText2 = ref('')
    const pSearchText3 = ref([])
    const pSearchText4 = ref('')

    // 官方文本框的属性直接写就行
    const disabled = ref(false)
    const placeholderStyle = 'font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #8990A4;'

    const selectData = ref([
      { value: 0, text: "篮球fffffff" },
      { value: 1, text: "足球ggggg" },
      { value: 2, text: "游泳bbbbbb" },
    ])

    // 获取远程数据
    const getRemoteSelectListData = async (query) => {
      loading.value = true
      // 此处写上自己的接口
      const { list } = await getRemoteSelectList(query)
      loading.value = false
      // 调用完需要调用组件的setSelectOptionList方法刷新列表
      remoteRef1.value.setSelectOptionList(list)
      remoteRef2.value.setSelectOptionList(list)
    }
</script>

<style>
    .myClass{
        margin: 16px;
    }
</style>

属性值 props