Sard Uniapp

Appearance

在新窗口打开⤴

Select列表选择1.27+

介绍 ​

从列表中选择一个或多个选项。

引入 ​

js
import Select from 'sard-uniapp/components/select/select.vue'
import SelectOption from 'sard-uniapp/components/select-option/select-option.vue'
import SelectOptionGroup from 'sard-uniapp/components/select-option-group/select-option-group.vue'

代码演示 ​

基础使用 ​

v-model 绑定当前被选中的 SelectOption 的 value 属性值。

vue
<template>
  <sar-list card>
    <sar-list-item>
      <sar-select v-model="value" @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>
    </sar-list-item>
    <sar-list-item
      title="当前值："
      :value="JSON.stringify(value) ?? 'undefined'"
    />
    <sar-list-item
      title="设置为：440100 (广州市)"
      arrow
      hover
      @click="value = 440100"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-list>
</template>

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

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

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

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item>
      <sar-select v-model="value" @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>
    </sar-list-item>
    <sar-list-item
      title="当前值："
      :value="JSON.stringify(value) ?? 'undefined'"
    />
    <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 { getRegionData } from "region-data";
import { ref } from "vue";
const regionData = getRegionData().slice(16, 20);
const value = ref(450100);
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

更多案例，请参考 SelectPopout 组件。

API ​

SelectProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
model-value当前绑定的值any-
multiple是否允许多选booleanfalse
multiple-limit多选时允许最多选择的个数，为0则不限制number0
filterable是否允许筛选booleanfalse
filter-placeholder筛选输入框的占位文案string-
filter-method允许筛选时的回调(query: string) => void-
remote是否允许远程加载数据booleanfalse
remote-method允许远程加载数据时的回调(query: string, page: number, isRefresh: boolean) => Promise\<boolean>-
threshold触发远程加载回调的阈值，单位msnumber500
show-toolbar多选时，是否显示工具栏booleanfalse
options选项的数据Record<string, any>[][]
option-keys自定义 options 中的字段OptionKeys{label: 'label', value: 'value', children: 'children'}
value-key作为 value 唯一标识的键名，绑定值为对象类型时必填OptionKeys{label: 'label', value: 'value', children: 'children'}

OptionKeys ​

tsx
interface OptionKeys {
  label?: string
  value?: string
  children?: string
}

SelectSlots ​

插槽描述属性
default自定义默认内容-

SelectEmits ​

事件描述类型
update:model-value列表选择组件值改变时触发(value: any) => void
change列表选择组件值改变时触发(value: any) => void

SelectOptionGroupProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
label选项组的标签string | number-
disabled是否禁用组内所有的选项booleanfalse

SelectOptionGroupSlots ​

插槽描述属性
default自定义默认内容-

SelectOptionProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
label选项的标签string | number-
value选项的值string | number | boolean | object-
disabled是否禁用该选项booleanfalse
plain是否移除默认样式booleanfalse

SelectOptionSlots ​

插槽描述属性
default自定义默认内容{ disabled: boolean; selected: boolean }
label自定义标签内容{ disabled: boolean; selected: boolean }

SelectOptionEmits ​

事件描述类型
click点击选项时触发(event: any) => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-select-max-height: 640rpx;
  --sar-select-bg: var(--sar-emphasis-bg);

  --sar-select-search-padding-x: 32rpx;
  --sar-select-search-padding-y: 20rpx;

  --sar-select-option-padding-x: 32rpx;
  --sar-select-option-padding-y: 20rpx;
  --sar-select-option-active-bg: var(--sar-active-bg);
  --sar-select-option-disabled-opacity: var(--sar-disabled-opacity);
  --sar-select-option-selected-color: var(--sar-primary);

  --sar-select-option-label-font-size: var(--sar-text-base);
  --sar-select-option-label-line-height: var(--sar-leading-normal);

  --sar-select-option-group-label-padding-x: 32rpx;
  --sar-select-option-group-label-padding-y: 16rpx;
  --sar-select-option-group-label-font-size: var(--sar-text-sm);
  --sar-select-option-group-label-line-height: var(--sar-leading-snug);
  --sar-select-option-group-label-color: var(--sar-tertiary-color);
  --sar-select-option-group-label-bg: var(--sar-body-bg);

  --sar-select-toolbar-padding-x: 32rpx;
  --sar-select-toolbar-padding-y: 0;

  --sar-select-empty-margin-top: 32rpx;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao