Sard Uniapp

Appearance

在新窗口打开⤴

SelectPopout列表选择弹出框1.27+

介绍 ​

组合了列表选择、弹出框组件，实现了便捷快速的选择功能。

引入 ​

js
import SelectPopout from 'sard-uniapp/components/select-popout/select-popout.vue'

代码演示 ​

基础使用 ​

使用 v-model 双向绑定当前值，使用 v-model:visible 控制弹出框显隐。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440000 (广东省)"
      arrow
      hover
      @click="value = 440000"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()

const visible = ref(false)
const value = ref<number>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440000 (广东省)"
      arrow
      hover
      @click="value = 440000"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

选项分组 ​

你可以使用 SelectOptionGroup 组件对选项进行分组，label 属性为分组名。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option-group
      v-for="group in regionData"
      :key="group.code"
      :label="group.name"
      :value="group.code"
    >
      <sar-select-option
        v-for="item in group.children"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </sar-select-option-group>
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440100 (广州市)"
      arrow
      hover
      @click="value = 440100"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData().slice(16, 20)

const visible = ref(false)
const value = ref<number | undefined>(450100)

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option-group
      v-for="group in regionData"
      :key="group.code"
      :label="group.name"
      :value="group.code"
    >
      <sar-select-option
        v-for="item in group.children"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </sar-select-option-group>
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440100 (广州市)"
      arrow
      hover
      @click="value = 440100"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData().slice(16, 20);
const visible = ref(false);
const value = ref(450100);
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

多选 ​

设置 multiple 属性即可开启多选。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    multiple
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：[440000, 450000] (广东省，广西)"
      arrow
      hover
      @click="value = [440000, 450000]"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()

const visible = ref(false)
const value = ref<number[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    multiple
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：[440000, 450000] (广东省，广西)"
      arrow
      hover
      @click="value = [440000, 450000]"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

显示工具栏 ​

多选时，可是设置 show-toolbar 显示工具栏，工具栏提供“选择所有”和“清空选择”功能按钮，并显示当前所有的个数。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    multiple
    show-toolbar
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：[440000, 450000] (广东省，广西)"
      arrow
      hover
      @click="value = [440000, 450000]"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()

const visible = ref(false)
const value = ref<number[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    multiple
    show-toolbar
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：[440000, 450000] (广东省，广西)"
      arrow
      hover
      @click="value = [440000, 450000]"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

最多选择个数 ​

多选时，可以设置 multiple-limit 属性限制最多选择个数。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    multiple
    show-toolbar
    :multiple-limit="3"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：[440000, 450000] (广东省，广西)"
      arrow
      hover
      @click="value = [440000, 450000]"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()

const visible = ref(false)
const value = ref<number[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    multiple
    show-toolbar
    :multiple-limit="3"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：[440000, 450000] (广东省，广西)"
      arrow
      hover
      @click="value = [440000, 450000]"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

禁用选项 ​

设置选项的 disabled 属性，可以禁止选择此选项。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option
      v-for="(item, i) in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
      :disabled="i % 4 === 0"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440000 (广东省)"
      arrow
      hover
      @click="value = 440000"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()

const visible = ref(false)
const value = ref<number>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option
      v-for="(item, i) in regionData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
      :disabled="i % 4 === 0"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440000 (广东省)"
      arrow
      hover
      @click="value = 440000"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

自定义选项标签 ​

默认选项标签只能设置文字，如果要自定义结构，可以使用选项的 label 插槽。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in colors"
      :key="item.value"
      :value="item.value"
    >
      <template #label>
        <view class="flex gap-16">
          <view
            class="size-48 rounded-sm"
            :style="{ background: item.value }"
          ></view>
          <view>{{ item.label }}</view>
        </view>
      </template>
    </sar-select-option>
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：#FFDE0A (yellow)"
      arrow
      hover
      @click="value = '#FFDE0A'"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const colors = [
  {
    value: '#E63415',
    label: 'red',
  },
  {
    value: '#FF6600',
    label: 'orange',
  },
  {
    value: '#FFDE0A',
    label: 'yellow',
  },
  {
    value: '#1EC79D',
    label: 'green',
  },
  {
    value: '#14CCCC',
    label: 'cyan',
  },
  {
    value: '#4167F0',
    label: 'blue',
  },
  {
    value: '#6222C9',
    label: 'purple',
  },
]

const visible = ref(false)
const value = ref<string>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in colors"
      :key="item.value"
      :value="item.value"
    >
      <template #label>
        <view class="flex gap-16">
          <view
            class="size-48 rounded-sm"
            :style="{ background: item.value }"
          ></view>
          <view>{{ item.label }}</view>
        </view>
      </template>
    </sar-select-option>
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：#FFDE0A (yellow)"
      arrow
      hover
      @click="value = '#FFDE0A'"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const colors = [
  {
    value: "#E63415",
    label: "red"
  },
  {
    value: "#FF6600",
    label: "orange"
  },
  {
    value: "#FFDE0A",
    label: "yellow"
  },
  {
    value: "#1EC79D",
    label: "green"
  },
  {
    value: "#14CCCC",
    label: "cyan"
  },
  {
    value: "#4167F0",
    label: "blue"
  },
  {
    value: "#6222C9",
    label: "purple"
  }
];
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

自定义整个选项 ​

如果要自定义整个选项结构，可以使用默认插槽，并设置选项的 plain 属性来清除默认样式。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <view class="grid grid-cols-2 gap-16 px-32">
      <sar-select-option
        v-for="item in colors"
        :key="item.value"
        :value="item.value"
        plain
      >
        <template #default="{ selected }">
          <view
            class="box-border flex-1 flex p-16 border border-base border-solid gap-16 rounded"
            :class="{ 'border-primary': selected }"
            style="width: calc((100vw - 32rpx * 2 - 16rpx) / 2)"
          >
            <view
              class="size-48 rounded-sm"
              :style="{ background: item.value }"
            ></view>
            <view>{{ item.label }}</view>
          </view>
        </template>
      </sar-select-option>
    </view>
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：#FFDE0A (yellow)"
      arrow
      hover
      @click="value = '#FFDE0A'"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const colors = [
  {
    value: '#E63415',
    label: 'red',
  },
  {
    value: '#FF6600',
    label: 'orange',
  },
  {
    value: '#FFDE0A',
    label: 'yellow',
  },
  {
    value: '#1EC79D',
    label: 'green',
  },
  {
    value: '#14CCCC',
    label: 'cyan',
  },
  {
    value: '#4167F0',
    label: 'blue',
  },
]

const visible = ref(false)
const value = ref<string>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    @change="onChange"
  >
    <view class="grid grid-cols-2 gap-16 px-32">
      <sar-select-option
        v-for="item in colors"
        :key="item.value"
        :value="item.value"
        plain
      >
        <template #default="{ selected }">
          <view
            class="box-border flex-1 flex p-16 border border-base border-solid gap-16 rounded"
            :class="{ 'border-primary': selected }"
            style="width: calc((100vw - 32rpx * 2 - 16rpx) / 2)"
          >
            <view
              class="size-48 rounded-sm"
              :style="{ background: item.value }"
            ></view>
            <view>{{ item.label }}</view>
          </view>
        </template>
      </sar-select-option>
    </view>
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：#FFDE0A (yellow)"
      arrow
      hover
      @click="value = '#FFDE0A'"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const colors = [
  {
    value: "#E63415",
    label: "red"
  },
  {
    value: "#FF6600",
    label: "orange"
  },
  {
    value: "#FFDE0A",
    label: "yellow"
  },
  {
    value: "#1EC79D",
    label: "green"
  },
  {
    value: "#14CCCC",
    label: "cyan"
  },
  {
    value: "#4167F0",
    label: "blue"
  }
];
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

筛选选项 ​

如果选项数量太多，可以设置 filterable 属性显示筛选输入框；并设置 filter-method 属性，这个属性是一个回调函数，会在输入框值改变时触发，并接收输入框值作为参数。筛选逻辑需自行实现。

vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    filterable
    filter-placeholder="请输入过滤关键词"
    :filter-method="filterMethod"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in filteredData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440000 (广东省)"
      arrow
      hover
      @click="value = 440000"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()
const filteredData = ref(regionData)

const visible = ref(false)
const value = ref<number>()

const filterMethod = (query: string) => {
  filteredData.value = query
    ? regionData.filter((item) => item.name.includes(query))
    : regionData
}

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-select-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    filterable
    filter-placeholder="请输入过滤关键词"
    :filter-method="filterMethod"
    @change="onChange"
  >
    <sar-select-option
      v-for="item in filteredData"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </sar-select-popout>

  <sar-list card>
    <sar-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </sar-list-item>
    <sar-list-item
      title="设置为：440000 (广东省)"
      arrow
      hover
      @click="value = 440000"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const filteredData = ref(regionData);
const visible = ref(false);
const value = ref();
const filterMethod = (query) => {
  filteredData.value = query ? regionData.filter((item) => item.name.includes(query)) : regionData;
};
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

远程 ​

如果需要从远程服务器获取数据，可以设置 filterable 显示输入框，设置 remote 属性启动远程逻辑，设置 remote-method 属性处理远程数据获取逻辑。

remote-method 属性是一个回调函数，接收输入框值、当前页码和表示是否刷新的布尔值作为参数，并返回 Promise<boolean> 类型值，Promise 的布尔类型泛型参数表示是否已获取全部数据。

Select 组件远程功能使用到了 LoadMore 组件和 useLoadMore 钩子函数，会在触底时加载下一页数据。

vue
<template>
  <view>
    <sar-select-popout
      v-model="value"
      v-model:visible="visible"
      title="请选择"
      filterable
      filter-placeholder="请输入过滤关键词"
      remote
      :remote-method="remoteMethod"
      @change="onChange"
    >
      <sar-select-option
        v-for="item in listData"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </sar-select-popout>

    <sar-list card>
      <sar-list-item arrow hover @click="visible = true">
        <template #title>
          {{ value ? JSON.stringify(value) : '请选择' }}
        </template>
      </sar-list-item>
      <sar-list-item
        title="设置为：440100 (广州市)"
        arrow
        hover
        @click="value = 440100"
      />
      <sar-list-item title="清空" arrow hover @click="value = undefined" />
    </sar-list>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { mapCities } from 'region-data'
import { sleep } from 'sard-uniapp'

const visible = ref(false)
const value = ref<number>()

const onChange = (value: any) => {
  console.log('change', value)
}

// server
const cities = Object.entries(mapCities).map(([code, name]) => ({
  code: +code,
  name,
}))

const mockRequest = async (query: string, page = 1, pageSize = 10) => {
  await sleep(300)

  const filteredData = query
    ? cities.filter((item) => item.name.includes(query))
    : cities

  const offset = (page - 1) * pageSize
  return {
    list: filteredData.slice(offset, offset + pageSize),
    total: filteredData.length,
  }
}

// client
const listData = ref<
  {
    code: number
    name: string
  }[]
>([])

const remoteMethod = async (
  query: string,
  page: number,
  isRefresh: boolean,
) => {
  return mockRequest(query, page).then(({ list = [], total = 0 }) => {
    if (isRefresh) {
      listData.value = [...list]
    } else {
      listData.value = [...listData.value, ...list]
    }
    return listData.value.length >= total || list.length === 0
  })
}
</script>
vue
<template>
  <view>
    <sar-select-popout
      v-model="value"
      v-model:visible="visible"
      title="请选择"
      filterable
      filter-placeholder="请输入过滤关键词"
      remote
      :remote-method="remoteMethod"
      @change="onChange"
    >
      <sar-select-option
        v-for="item in listData"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </sar-select-popout>

    <sar-list card>
      <sar-list-item arrow hover @click="visible = true">
        <template #title>
          {{ value ? JSON.stringify(value) : '请选择' }}
        </template>
      </sar-list-item>
      <sar-list-item
        title="设置为：440100 (广州市)"
        arrow
        hover
        @click="value = 440100"
      />
      <sar-list-item title="清空" arrow hover @click="value = undefined" />
    </sar-list>
  </view>
</template>

<script setup lang="js">
import { ref } from "vue";
import { mapCities } from "region-data";
import { sleep } from "sard-uniapp";
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
const cities = Object.entries(mapCities).map(([code, name]) => ({
  code: +code,
  name
}));
const mockRequest = async (query, page = 1, pageSize = 10) => {
  await sleep(300);
  const filteredData = query ? cities.filter((item) => item.name.includes(query)) : cities;
  const offset = (page - 1) * pageSize;
  return {
    list: filteredData.slice(offset, offset + pageSize),
    total: filteredData.length
  };
};
const listData = ref([]);
const remoteMethod = async (query, page, isRefresh) => {
  return mockRequest(query, page).then(({ list = [], total = 0 }) => {
    if (isRefresh) {
      listData.value = [...list];
    } else {
      listData.value = [...listData.value, ...list];
    }
    return listData.value.length >= total || list.length === 0;
  });
};
</script>

API ​

SelectPopoutProps ​

继承 SelectProps 并有以下额外属性：

属性描述类型默认值
popout-class弹窗框根元素类名string-
popout-style弹窗框根元素样式StyleValue-
visible (v-model)是否显示弹出框boolean-
title弹出框标题string-
show-confirm 1.27.1+单选时是否显示确定按钮，隐藏按钮可用于快捷选择booleantrue
validate-event是否触发表单验证booleantrue
resettable关闭弹出框后，是否可复位弹出框值booleanfalse

SelectPopoutSlots ​

继承 SelectSlots

SelectPopoutEmits ​

事件描述类型
update:model-value组件值改变时触发(value: any) => void
change组件值改变时触发(value: any) => void
update:visible弹出框显隐时触发(visible: boolean) => void
confirm点击确定按钮时触发() => void
visible-hook入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter入场动画开始前触发() => void
enter入场动画开始时触发() => void
after-enter入场动画结束时触发() => void
enter-cancelled入场动画取消时触发() => void
before-leave退场动画开始前触发() => void
leave退场动画开始时触发() => void
after-leave退场动画结束时触发() => void
leave-cancelled退场动画取消时触发() => void

Released under the MIT License.

Copyright © 2023-present wuzhitao