42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="aa-densw">
|
|
<button
|
|
v-for="o in options"
|
|
:key="o.value"
|
|
class="aa-densw-opt"
|
|
:class="{ 'is-active': modelValue === o.value }"
|
|
@click="emit('update:modelValue', o.value)"
|
|
>{{ o.label }}</button>
|
|
</div>
|
|
<div class="aa-densw-demo" :class="modelValue">
|
|
<div v-for="(r, i) in rows" :key="i" class="aa-densw-row"><span>{{ r.name }}</span><span class="muted">{{ r.count }}</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
modelValue: { type: String, default: 'default' },
|
|
options: {
|
|
type: Array,
|
|
default: () => [
|
|
{ value: 'loose', label: '宽松' },
|
|
{ value: 'default', label: '默认' },
|
|
{ value: 'compact', label: '紧凑' }
|
|
]
|
|
},
|
|
rows: {
|
|
type: Array,
|
|
default: () => [
|
|
{ name: '用户管理', count: '128 项' },
|
|
{ name: '角色管理', count: '12 项' },
|
|
{ name: '菜单管理', count: '36 项' }
|
|
]
|
|
}
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
</script>
|
|
|
|
<style src="./DensitySwitcher.css"></style>
|