github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: form component IconPicker (#5005)

Browse Source
This commit is contained in:
Netfan
2024-12-04 21:42:21 +08:00
committed by GitHub
parent 935df713f3
commit e23486dbc6
12 changed files with 149 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
playground/src/views/demos/features/icons/index.vue
View File

@@ -1,6 +1,9 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { ref } from 'vue';
import { IconPicker, Page } from '@vben/common-ui';
import {
IconifyIcon,
MdiGithub,
MdiGoogle,
MdiKeyboardEsc,
@@ -16,9 +19,9 @@ import {
SvgDownloadIcon,
} from '@vben/icons';
import { Card } from 'ant-design-vue';
import { Card, Input } from 'ant-design-vue';
import IconPicker from './icon-picker.vue';
const iconValue = ref('ant-design:trademark-outlined');
</script>
<template>
@@ -71,15 +74,53 @@ import IconPicker from './icon-picker.vue';
</div>
</Card>
<Card class="mb-5" title="图标选择器(Iconify)">
<div class="flex items-center gap-5">
<IconPicker width="300px" />
<Card class="mb-5" title="图标选择器">
<div class="mb-5 flex items-center gap-5">
<span>原始样式(Iconify):</span>
<IconPicker class="w-[200px]" />
</div>
<div class="mb-5 flex items-center gap-5">
<span>原始样式(svg):</span>
<IconPicker class="w-[200px]" prefix="svg" />
</div>
<div class="mb-5 flex items-center gap-5">
<span>完整替换触发组件:</span>
<IconPicker class="w-[200px]">
<template #trigger="{ icon }">
<Input
:value="icon"
placeholder="点击这里选择图标"
style="width: 300px"
>
<template #addonAfter>
<IconifyIcon
:icon="icon || 'ant-design:appstore-filled'"
class="text-2xl"
/>
</template>
</Input>
</template>
</IconPicker>
</div>
</Card>
<Card title="图标选择器(Svg)">
<div class="flex items-center gap-5">
<IconPicker prefix="svg" width="300px" />
<span>可手动输入，只能点击图标打开弹窗:</span>
<Input
v-model:value="iconValue"
allow-clear
placeholder="点击这里选择图标"
style="width: 300px"
>
<template #addonAfter>
<IconPicker v-model="iconValue" class="w-[200px]">
<template #trigger="{ icon }">
<IconifyIcon
:icon="icon || 'ant-design:appstore-filled'"
class="text-2xl"
/>
</template>
</IconPicker>
</template>
</Input>
</div>
</Card>
</Page>