40 lines
956 B
Vue
40 lines
956 B
Vue
<template>
|
|
<div class="aa-layoutsw">
|
|
<div
|
|
v-for="o in options"
|
|
:key="o.value"
|
|
class="aa-layoutsw-opt"
|
|
:class="{ 'is-active': value === o.value }"
|
|
@click="$emit('input', 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>
|
|
export default {
|
|
name: 'AaLayoutSwitcher',
|
|
props: {
|
|
value: { type: String, default: 'side' },
|
|
options: {
|
|
type: Array,
|
|
default: () => [
|
|
{ value: 'side', label: '侧边布局' },
|
|
{ value: 'top', label: '顶部布局' },
|
|
{ value: 'mixed', label: '混合布局' }
|
|
]
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="./LayoutSwitcher.css"></style>
|