63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<a-drawer :visible="visible" @close="onClose" class="yo-icon-selector" title="选择图标" width="600">
|
|
<a-tabs tab-position="left" v-model="active">
|
|
<a-tab-pane :key="iconGroup.key" :tab="iconGroup.title" v-for="iconGroup in icons">
|
|
<a-card>
|
|
<a-card-grid
|
|
:class="{ 'yo-icon--selected': selected == icon }"
|
|
:key="icon"
|
|
@click="onSelectIcon(icon)"
|
|
v-for="icon in iconGroup.icons"
|
|
>
|
|
<a-icon :style="{ fontSize: '36px' }" :type="icon" />
|
|
<span>{{ icon }}</span>
|
|
</a-card-grid>
|
|
</a-card>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-drawer>
|
|
</template>
|
|
<script>
|
|
import icons from './icons';
|
|
|
|
export default {
|
|
model: {
|
|
prop: 'selected',
|
|
event: 'select',
|
|
},
|
|
props: {
|
|
selected: {
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
|
|
icons,
|
|
|
|
active: icons[0].key,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
onOpen() {
|
|
this.visible = true;
|
|
if (this.selected) {
|
|
this.active = (icons.find((p) => p.icons.indexOf(this.selected) > -1) || icons[0]).key;
|
|
} else {
|
|
this.active = icons[0].key;
|
|
}
|
|
},
|
|
|
|
onClose() {
|
|
this.visible = false;
|
|
},
|
|
|
|
onSelectIcon(icon) {
|
|
this.$emit('select', icon);
|
|
this.onClose();
|
|
},
|
|
},
|
|
};
|
|
</script> |