51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<template>
|
|
<div class="icon-picker-demo">
|
|
<a-card title="图标选择器演示" style="max-width: 600px; margin: 20px auto;">
|
|
<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
<a-form-item label="选择图标">
|
|
<sc-icon-picker v-model="selectedIcon" @change="handleIconChange" />
|
|
</a-form-item>
|
|
|
|
<a-form-item label="选中值">
|
|
<a-input v-model:value="selectedIcon" readonly />
|
|
</a-form-item>
|
|
|
|
<a-form-item label="图标预览">
|
|
<div v-if="selectedIcon" class="icon-preview">
|
|
<component :is="selectedIcon" style="font-size: 48px;" />
|
|
</div>
|
|
<a-empty v-else description="未选择图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Empty } from 'ant-design-vue'
|
|
import ScIconPicker from '@/components/scIconPicker/index.vue'
|
|
|
|
const selectedIcon = ref('')
|
|
|
|
const handleIconChange = (value) => {
|
|
console.log('图标已选择:', value)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.icon-picker-demo {
|
|
padding: 20px;
|
|
|
|
.icon-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
min-height: 88px;
|
|
}
|
|
}
|
|
</style>
|