38 lines
969 B
Vue
38 lines
969 B
Vue
<template>
|
|
<div class="aa-layoutsw">
|
|
<div
|
|
v-for="o in options"
|
|
:key="o.value"
|
|
class="aa-layoutsw-opt"
|
|
:class="{ 'is-active': modelValue === o.value }"
|
|
@click="emit('update:modelValue', o.value)"
|
|
>
|
|
<div class="aa-layoutsw-mini">
|
|
<div v-if="o.value !== 'side'" class="s-top"></div>
|
|
<div class="s-body">
|
|
<div v-if="o.value !== 'top'" class="s-side"></div>
|
|
<div class="s-main"></div>
|
|
</div>
|
|
</div>
|
|
<div class="aa-layoutsw-label">{{ o.label }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
modelValue: { type: String, default: 'side' },
|
|
options: {
|
|
type: Array,
|
|
default: () => [
|
|
{ value: 'side', label: '侧边布局' },
|
|
{ value: 'top', label: '顶部布局' },
|
|
{ value: 'mixed', label: '混合布局' }
|
|
]
|
|
}
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
</script>
|
|
|
|
<style src="./LayoutSwitcher.css"></style>
|