vue3-antd-icons-picker v1.0.9

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）

Events 事件

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

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）

Events 事件

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

Events 事件