Small Tail Doc

外观

StnIconifyIconSelector

1144 字约 4 分钟

2024-12-31

StnIconifyIconSelector 是一个 Iconify 图标 选择器组件。该组件主要是基于 Naive Tabs 标签页、 Grid 栅格、Pagination 分页 等组件封装而成。

使用前提

由于在该组件中使用了 Naive UI useMessage API 来显示提示信息，所以在使用该组件之前，与使用 Naive UI useMessage API 一样，需要在项目中使用 NMessageProvider 组件包裹根组件中的内容，以此来保证全局消息提示功能的正常提供和使用。

App.vue

<template>
  <n-message-provider>
    <!-- App.vue 根组件的内容... -->
  </n-message-provider>
</template>

组件参数

参数名描述类型默认值
setPrefixes图标集前缀名称列表，用于指定选择器中可选的 Iconify 图标集，使用该参数指定的可选图标集的图标名称列表数据是通过网络请求获取的string[][]
sets由图标集图标名称列表为 value，图标集名称为 key 组成的对象，用于指定选择器中可选的 Iconify 图标集，使用该参数指定的可选图标集的图标名称列表数据是需要组件用户本地提前准备的Record<string, string[]>{}
setSelectedDefault图标选择器中默认选中的图标集 tab，传入图标集名称即可，如果没有传入该参数，则默认选中 sets 参数中第一个图标集，如果 sets 参数中没有图标集，则默认选中 setPrefixes 参数中第一个图标集stringundefined
isOffline图标选择器中的图标列表是否使用离线版的 IconifyIcon 组件 进行渲染booleanfalse
iconSize图标选择器中图标的大小number24
iconSelectedColor图标选中后的颜色string'#18a058'
size整个图标选择器组件的大小'small' | 'medium' | 'large''small'
search是否开启搜索图标功能booleantrue
setSearchIpt搜索图标功能开启后，是否开启可以指定搜索图标的图标集booleantrue
searchResultLimit搜索出来的图标结果的数量限制，默认为 64，最小值为 32，最大值为 999number64
searchIconNameNotIptTip搜索图标时，图标名称未输入提示信息string'请输入图标名称'
setIptPlaceholder搜索图标功能中，图标集输入框 placeholderstring'图标集名称'
iconNamePlaceholder搜索图标功能中，图标名称输入框 placeholderstring'图标名称'
setIptFlex搜索图标功能中，图标集输入框 flex 比例number2
iconNameIptFlex搜索图标功能中，图标名称输入框 flex 比例number3
searchNotFoundTip没有找到指定名称的图标时的提示信息string'没有找到相关图标'
iconSetNullTip图标集为空时的提示信息string'没有图标呢...'
searchTabName搜索 tab 名称string'搜索'
iconListHeight图标列表的高度number | string'130px'
iconListMaxHeight图标列表的最大高度number | string'130px'
iconListScrollbarTrigger图标列表滚动条的显示时机，'none' 表示一直显示'hover' | 'none''hover'
cols图标显示的列数，具体设置可以参考 Navie Grid 栅格number | string'5 375:10 600:15 800:20 1200:30'
responsive图标列表的响应式布局方式，'self' 根据自身宽度进行响应式布局，'screen' 根据屏幕断点进行响应式布局'self' | 'screen'self'
itemResponsive图标元素是否可具有响应式宽度booleanfalse
tabsPadding图标集全部 tabs 最左和最右 tab 的 paddingnumber0
tabTrigger图标集 tab 切换的触发方式'click' | 'hover''click'
tabPlacement图标集 tabs 的位置'left' | 'right' | 'top' | 'bottom''top'
tabType图标集 tab 的样式类型'bar' | 'line' | 'card' | 'segment''bar'
pageSizeDefault图标分页中每页显示的图标数量的默认值number30
pageSizes图标分页中每页显示的图标数量的可选值列表number[][]
pageSlot图标分页中页码显示的个数number8
showQuickJumper图标分页中是否显示快速跳转booleanfalse
goto图标分页中快速跳转的文本内容() => VNodeChild() => '跳至'
paginationSelectProps图标分页中每页显示的图标数量的下拉框选择器组件配置参数，具体配置参数说明可以参考 Navie Select PropsSelectProps

组件双向绑定参数

参数名描述类型默认值
value选中图标的完整名称（包括图标集前缀）string''

组件样式

  1. 整个组件中最外层的元素样式设置了 box-sizing: border-box;；
  2. 整个组件中最外层元素的宽度和高度都为 100%；

贡献者

变更历史

最后更新于: 查看全部变更历史

  • 更新：图标选择器新增组件参数文档说明

    于 2025/1/4