73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<template>
|
|
<j-modal
|
|
visible
|
|
title="菜单图标"
|
|
width="800px"
|
|
:maskClosable="false"
|
|
@cancel="emits('update:visible', false)"
|
|
@ok="confirm"
|
|
>
|
|
<j-radio-group v-model:value="selected" class="radio">
|
|
<j-radio-button
|
|
v-for="typeStr in iconKeys"
|
|
:value="typeStr"
|
|
:key="typeStr"
|
|
:class="{ active: selected === typeStr }"
|
|
>
|
|
<AIcon :type="typeStr" />
|
|
</j-radio-button>
|
|
</j-radio-group>
|
|
</j-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import iconKeys from './fields';
|
|
const emits = defineEmits(['confirm', 'update:visible']);
|
|
const props = defineProps<{
|
|
visible: boolean;
|
|
icon:{
|
|
type:string,
|
|
default:''
|
|
}
|
|
}>();
|
|
|
|
const confirm = () => {
|
|
emits('confirm', selected.value);
|
|
emits('update:visible', false);
|
|
};
|
|
|
|
|
|
const selected = ref<string>('');
|
|
|
|
onMounted(()=>{
|
|
console.log(props)
|
|
props?.icon ? selected.value = props.icon : ''
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.radio {
|
|
display: grid;
|
|
grid-gap: 20px;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
|
|
.ant-radio-button-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100px;
|
|
font-size: 40px;
|
|
border: 2px solid #efefef;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
color: #415ed1;
|
|
border-color: #415ed1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|