图标选择器 - SIconSelect

基于 SIcon 和 ASelect 封装，默认使用 @ant-design/icons-vue 图标，也支持自定义选项

演示

基本用法

基本用法

默认使用 @ant-design/icons-vue 图标组件，建议使用 tags 模式，支持单选/多选 (multiple)

单选 (multiple: false)

AlibabaOutlined

 

SearchOutlined

 

多选 (multiple: true)

AlibabaOutlined

FontColorsOutlined

 

SearchOutlined

ApartmentOutlined

 

复制代码

显示代码

<template>
  <ASpace
    :size="10"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <div class="title">
      单选 (multiple: false)
    </div>

    <ASpace
      :size="25"
      :wrap="true"
      style="margin: 0"
    >
      <SIconSelect
        v-model:value="value1"
        style="width: 210px"
        mode="tags"
      />

      <SIconSelect
        v-model:value="value2"
        style="width: 210px"
        mode="tags"
      />
    </ASpace>

    <div class="space" />

    <div class="title">
      多选 (multiple: true)
    </div>

    <ASpace
      :size="25"
      :wrap="true"
      style="margin: 0"
    >
      <SIconSelect
        v-model:value="value3"
        style="width: 210px"
        :multiple="true"
        mode="tags"
      />

      <SIconSelect
        v-model:value="value4"
        style="width: 210px"
        :multiple="true"
        mode="tags"
      />
    </ASpace>
  </ASpace>
</template>

<script setup lang="ts">
const value1 = ref('AlibabaOutlined')
const value2 = ref('SearchOutlined')

const value3 = ref([
  'AlibabaOutlined',
  'FontColorsOutlined',
])

const value4 = ref([
  'SearchOutlined',
  'ApartmentOutlined',
])
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  font-size: 14px;
  color: #30323c;
}

.space {
  width: 100%;
  height: 8px;
}
</style>

支持 iconfont

支持 iconfont

通过 iconPrefix 和 iconfontUrl 配置, 支持使用 iconfont 图标组件，建议使用 tags 模式

单选 (multiple: false)

font-product

 

font-shop

 

多选 (multiple: true)

font-product

font-setting

 

font-shop

font-refresh

 

复制代码

显示代码

<template>
  <ASpace
    :size="10"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <div class="title">
      单选 (multiple: false)
    </div>

    <ASpace
      :size="25"
      :wrap="true"
      style="margin: 0"
    >
      <SIconSelect
        v-model:value="value1"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :iconStyle="{ color: '#606266' }"
        style="width: 210px"
        mode="tags"
      />

      <SIconSelect
        v-model:value="value2"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :iconStyle="{ color: '#606266' }"
        style="width: 210px"
        mode="tags"
      />
    </ASpace>

    <div class="space" />

    <div class="title">
      多选 (multiple: true)
    </div>

    <ASpace
      :size="25"
      :wrap="true"
      style="margin: 0"
    >
      <SIconSelect
        v-model:value="value3"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :iconStyle="{ color: '#606266' }"
        style="width: 210px"
        :multiple="true"
        mode="tags"
      />

      <SIconSelect
        v-model:value="value4"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :iconStyle="{ color: '#606266' }"
        style="width: 210px"
        :multiple="true"
        mode="tags"
      />
    </ASpace>
  </ASpace>
</template>

<script setup lang="ts">
const iconPrefix = 'font-'
const iconfontUrl = 'https://at.alicdn.com/t/c/font_1403293_zz95gjv9ru.js'

const value1 = ref('font-product')
const value2 = ref('font-shop')

const value3 = ref([
  'font-product',
  'font-setting',
])

const value4 = ref([
  'font-shop',
  'font-refresh',
])
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  font-size: 14px;
  color: #30323c;
}

.space {
  width: 100%;
  height: 8px;
}
</style>

自定义 Icons

自定义 Icons

支持自定义选项 (Icons)，建议使用 tags 模式

单选 (multiple: false)

font-personal-outline

 

font-phone-outline

 

多选 (multiple: true)

font-personal-outline

font-friend-outline

 

font-phone-outline

font-email-outline

 

复制代码

显示代码

<template>
  <ASpace
    :size="10"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <div class="title">
      单选 (multiple: false)
    </div>

    <ASpace
      :size="25"
      :wrap="true"
      style="margin: 0"
    >
      <SIconSelect
        v-model:value="value1"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :options="iconOptions"
        style="width: 210px"
        mode="tags"
      />

      <SIconSelect
        v-model:value="value2"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :options="iconOptions"
        style="width: 210px"
        mode="tags"
      />
    </ASpace>

    <div class="space" />

    <div class="title">
      多选 (multiple: true)
    </div>

    <ASpace
      :size="25"
      :wrap="true"
      style="margin: 0"
    >
      <SIconSelect
        v-model:value="value3"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :options="iconOptions"
        style="width: 210px"
        :multiple="true"
        mode="tags"
      />

      <SIconSelect
        v-model:value="value4"
        :iconPrefix="iconPrefix"
        :iconfontUrl="iconfontUrl"
        :options="iconOptions"
        style="width: 210px"
        :multiple="true"
        mode="tags"
      />
    </ASpace>
  </ASpace>
</template>

<script setup lang="ts">
const iconPrefix = 'font-'
const iconfontUrl = 'https://at.alicdn.com/t/c/font_1403293_zz95gjv9ru.js'

const value1 = ref('font-personal-outline')
const value2 = ref('font-phone-outline')

const value3 = ref([
  'font-personal-outline',
  'font-friend-outline',
])

const value4 = ref([
  'font-phone-outline',
  'font-email-outline',
])

const iconOptions = iconOptionsDefiner([
  {
    label: '用户',
    value: 'User',
    options: [
      {
        label: 'font-personal-outline',
        value: 'font-personal-outline',
      },
      {
        label: 'font-friend-outline',
        value: 'font-friend-outline',
      },
      {
        label: 'font-customer-service-outline',
        value: 'font-customer-service-outline',
      },
    ],
  },
  {
    label: '操作',
    value: 'Operate',
    options: [
      {
        label: 'font-phone-outline',
        value: 'font-phone-outline',
      },
      {
        label: 'font-email-outline',
        value: 'font-email-outline',
      },
    ],
  },
])
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  font-size: 14px;
  color: #30323c;
}

.space {
  width: 100%;
  height: 8px;
}
</style>

API

Props

参数	说明	类型	默认值
style	设置 组件 style	string object	-
class	设置 组件 class	string object	-
iconStyle	设置 SIcon style	string object	-
iconClass	设置 SIcon class	string object	-
iconPrefix	设置 SIcon 的 iconfont icon 标识符	string	-
iconfontUrl	设置 SIcon 的 iconfont url 地址	string	-
optionFilterProp	搜索时过滤对应 option 属性	string	-
optionLabelProp	回填到选择框的 Option 的属性值	string	-
placeholder	选择框默认提示文字	string	-
showSearch	配置是否可搜索	boolean	true
allowClear	支持清除	boolean	true
showArrow	是否显示下拉小箭头	boolean	true
multiple	是否设置为多选 (即 value 值类型为 Array)	boolean	false
disabled	是否禁用	boolean	false
options	Options 数据 默认使用 icons-vue 图标选项	SIconSelectOption[]	-
value (v-model)	指定当前选中的条目	string number string[] number[]	-
mode	设置模式为多选或标签	'multiple' 'tags'	-
size	组件大小	'large' 'middle' 'small'	-

Emits

事件	说明	类型
change	选中 option，或 input 的 value 变更	(value: any, option: any | any[]) => void
search	文本框值变化时	(value: string) => void
blur	失去焦点时	(event: Event) => void

Definer

定义	说明
iconOptionsDefiner	辅助定义 Props options 选项，提供 TypeScript 提示和校验