vue3 ant design icons picker

Demo

vue3+unocss+vite5+pinia+antdv+vitest + i18n+vueuse，vue3管理后台开箱即用（多语言，多主题）模板,代码提交自动格式化，规范提交msg：eslint，commitlint，prettier，lint-staged，husky。2024年最新vue3管理后台模板 vue3-antd-app

install

# npm
npm i vue3-antd-icons-picker
# pnpm
pnpm add vue3-antd-icons-picker

// main.js
import { createApp } from 'vue'
import iconsPicker from 'vue3-antd-icons-picker'
import '../node_modules/vue3-antd-icons-picker/dist/style.css'
const app = createApp(App)
// ...
app.use(iconsPicker)

app.mount('#app')

Use Icons

<template>
  <NIconPicker
    :locale="locale"
    :theme="theme"
    v-model:value="selectIcon"
    @change="validateFields(['icon'])"
  ></NIconPicker>
</template>
<script setup>
import { ref } from 'vue'
const selectIcon = ref('')
const theme = ref('light')
const locale = ref('zh-CN')

/**
 * @description 校验字段
 */
const validateFields = (fields = []) => {
  if (!fields?.length) return
  formRef.value.validateFields(fields)
}
</script>

API（NIconPicker）

| 属性 | 说明 | 类型 | 默认值 | 版本 | | :----------- | ------------------: | ------: | --------: | ----: | | value | 选择的icon | string | '' | | | width | 宽度（%） | string | '100%' | | | pageSize | 分页大小 | number | 160 | | | copy | 是否复制 | boolean | false | | | mode | 类型,可选值: svg | string | 'iconify' | | | allowClear | 是否支持清除 | boolean | true | | | readonly | 是否只读 | boolean | false | | | theme | 主题,可选值: dark | string | 'light' | 1.0.8 | | locale | 多语言，可选en-us等 | string | 'zh-CN' | 1.0.8 | | colorPrimary | 默认颜色 | string | '#1677ff' | 1.0.9 |

Events 事件

| 方法 | 说明 | 返回值 | | :----- | -------------------: | ---------------: | | change | 选项变化时的回调函数 | (value) => value |

Use Icon in SubMenu

<template>
  <a-sub-menu :key="menuInfo.key" :class="prefixCls">
    <template #icon v-if="menuInfo.icon">
      <NIcon v-if="typeof menuInfo.icon === 'string'" :icon="menuInfo.icon" />
      <component v-else :is="menuInfo.icon" />
    </template>
    <template #title>{{ menuInfo.title }}</template>
    <template v-for="item in menuInfo.children" :key="item.key">
      <template v-if="!item.children">
        <a-menu-item :key="item.key" @click="handleRoute(item)">
          <template #icon v-if="item.icon">
            <NIcon v-if="typeof item.icon === 'string'" :icon="item.icon" />
            <component v-else :is="item.icon" />
          </template>
          {{ item.title }}
        </a-menu-item>
      </template>
    </template>
  </a-sub-menu>
</template>
<script setup>
import { useDesign } from 'hooks/useDesign'
const { prefixCls } = useDesign('sub-menu')
defineProps({
  menuInfo: {
    type: Object,
    default: () => ({})
  }
})
const handleRoute = (item) => {
  router.push({
    name: item.name
  })
}
</script>

API

| 属性 | 说明 | 类型 | 默认值 | 版本 | | :----- | --------------: | ------: | ----------: | ---: | | size | 大小 | number | 16 | | | color | 颜色 | string | 'text-dark' | | | icon | iconify图标名字 | string | '' | | | prefix | 前缀 | string | '' | | | spin | 是否加载 | boolean | false | |

Use CityCascader

<template>
  <a-form
    :model="formState"
    :rules="formRules"
    v-bind="formItemLayout"
    layout="horizontal"
    ref="formRef"
  >
    <a-form-item label="居住地址" name="addressList">
      <NUseCityCascader
        v-model:value="formState.addressList"
        @change="validateFields(['addressList'])"
      ></NUseCityCascader>
    </a-form-item>
  </a-form>
</template>
<script setup>
import { ref, shallowRef } from 'vue'
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24
    },
    sm: {
      span: 7
    }
  },
  wrapperCol: {
    xs: {
      span: 24
    },
    sm: {
      span: 17
    }
  }
}
const formRef = shallowRef()
const formState = ref({})
const formRules = ref({
  addressList: [
    {
      required: true,
      message: '请选择地址',
      trigger: 'change',
      type: 'array'
    }
  ]
})
/**
 * @description 校验字段
 */
const validateFields = (fields = []) => {
  if (!fields?.length) return
  formRef.value.validateFields(fields)
}
</script>

API（NUseCityCascader）

| 属性 | 说明 | 类型 | 默认值 | 版本 | | :------------------ | -------------------------------------------------------------------------: | -------------------: | -------------------------------------------------------: | ----: | | value | 选中项:[省, 市, 区,街道] | [string[], number[]] | [] | | | placeholder | 输入框占位文本 | string | '请选择' | | | fieldNames | 自定义 options 中 label value children 的字段 | object | { label: 'label', value: 'value', children: 'children' } | | | multiple | 是否多选 | boolean | false | | | changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见antd | boolean | false | | | showCheckedStrategy | 定义选中项回填的方式。可选：SHOW_CHILD | string | 'SHOW_PARENT' | | | maxTagCount | 最多显示多少个 tag | number | 10 | | | allowClear | 是否支持清除 | boolean | true | | | theme | 主题,可选值: dark | string | 'light' | 1.0.8 | | locale | 多语言，可选en-us等 | string | 'zh-CN' | 1.0.8 | | colorPrimary | 默认颜色 | string | '#1677ff' | 1.0.9 |

Events 事件

| 方法 | 说明 | 返回值 | | :----- | ---------------: | ---------------: | | change | 选择完成后的回调 | (value) => value |

Use TreeFrom

<template>
  <a-form
    :model="formState"
    :rules="formRules"
    layout="horizontal"
    ref="formRef"
    autocomplete="off"
    v-bind="formItemLayout"
  >
    ...
    <a-form-item label="用户权限" name="authList">
      <n-use-tree-form
        ref="menuRef"
        :treeData="treeData"
        v-model:value="formState.authList"
        placeholder="请输入用户权限"
        :height="500"
        @change="validateFields(['authList'])"
      ></n-use-tree-form>
    </a-form-item>
  </a-form>
</template>
<script setup>
defineProps({
  treeData: {
    type: Array,
    default: () => []
  }
})
import { ref, shallowRef } from 'vue'
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24
    },
    sm: {
      span: 7
    }
  },
  wrapperCol: {
    xs: {
      span: 24
    },
    sm: {
      span: 17
    }
  }
}
const formRef = shallowRef()
const formState = ref({})
const formRules = ref({
  authList: [
    {
      required: true,
      message: '请选择权限',
      trigger: 'change',
      type: 'array'
    }
  ]
})
/**
 * @description 校验字段
 */
const validateFields = (fields = []) => {
  if (!fields?.length) return
  formRef.value.validateFields(fields)
}
</script>

API

| 属性 | 说明 | 类型 | 默认值 | 版本 | | :----------- | --------------------------------------------: | -------: | -------------------------------------------------------: | ----: | | treeData | tree数据 | string[] | [] | | | value | 选中项 | string[] | [] | | | placeholder | 输入框占位文本 | string | '请输入' | | | height | 组件高度 | number | 600 | | | fieldNames | 自定义 options 中 label value children 的字段 | object | { label: 'label', value: 'value', children: 'children' } | | | theme | 主题,可选值: dark | string | 'light' | 1.0.8 | | locale | 多语言，可选en-us等 | string | 'zh-CN' | 1.0.8 | | colorPrimary | 默认颜色 | string | '#1677ff' | 1.0.9 | | getResult | 获取当前选择结果 | string[] | [] | |

Events 事件

| 方法 | 说明 | 返回值 | | :----- | ---------------: | ---------------: | | change | 选择完成后的回调 | (value) => value |