74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div :class="prefixCls">
|
|
<template v-for="item in items" :key="item.key">
|
|
<layout-block
|
|
:theme="item.key"
|
|
:checked="item.key === value"
|
|
:disabled="item.disabled"
|
|
:title="item.title"
|
|
@click="
|
|
() => {
|
|
!item.disabled && handleChange(item.key);
|
|
}
|
|
"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import type { PropType } from 'vue';
|
|
import { computed, defineComponent } from 'vue';
|
|
import { useI18n } from '@crami/locale';
|
|
import { useProProvider } from '../base-layouts/pro-provider';
|
|
import type { ThemeItem } from './index.vue';
|
|
import LayoutBlock from './layout-block.vue';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
value: String,
|
|
list: { type: Array as PropType<ThemeItem[]> },
|
|
},
|
|
emits: ['change'],
|
|
setup(props, { emit }) {
|
|
const { getPrefixCls } = useProProvider();
|
|
const prefixCls = getPrefixCls('setting-drawer-block-checbox');
|
|
const { t } = useI18n();
|
|
const items = computed<ThemeItem[]>(() => {
|
|
return (
|
|
props.list || [
|
|
{
|
|
key: 'side',
|
|
title: t('app.setting.layout.side'),
|
|
},
|
|
{
|
|
key: 'top',
|
|
title: t('app.setting.layout.top'),
|
|
},
|
|
{
|
|
key: 'mix',
|
|
title: t('app.setting.layout.mix'),
|
|
},
|
|
{
|
|
key: 'left',
|
|
title: t('app.setting.layout.leftmenu'),
|
|
},
|
|
]
|
|
);
|
|
});
|
|
const handleChange = (key: string) => {
|
|
emit('change', key);
|
|
};
|
|
|
|
return {
|
|
items,
|
|
prefixCls,
|
|
handleChange,
|
|
};
|
|
},
|
|
components: {
|
|
LayoutBlock,
|
|
},
|
|
});
|
|
</script>
|