44 lines
1.5 KiB
Vue
44 lines
1.5 KiB
Vue
<template>
|
|
<div class="aa-segmented">
|
|
<button
|
|
v-for="opt in options" :key="opt.value"
|
|
class="aa-segmented-item"
|
|
:class="{ 'is-active': modelValue === opt.value, 'is-disabled': opt.disabled }"
|
|
:disabled="opt.disabled"
|
|
@click="choose(opt)"
|
|
>
|
|
<span v-if="opt.icon" class="ico">{{ opt.icon }}</span>
|
|
{{ opt.label }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: { type: [String, Number], default: '' },
|
|
options: { type: Array, required: true } // [{ label, value, icon?, disabled? }]
|
|
});
|
|
const emit = defineEmits(['update:modelValue', 'change']);
|
|
|
|
function choose(opt) {
|
|
if (opt.disabled) return;
|
|
emit('update:modelValue', opt.value);
|
|
emit('change', opt.value);
|
|
}
|
|
</script>
|
|
|
|
<!-- 样式对齐 组件2.txt Segmented 规范 -->
|
|
<style scoped>
|
|
.aa-segmented {
|
|
display: inline-flex; align-items: center; background: #F5F7FA; border-radius: 4px; padding: 2px;
|
|
}
|
|
.aa-segmented-item {
|
|
height: 28px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
|
|
border-radius: 4px; cursor: pointer; font-size: 14px; color: #262626; border: none; background: none;
|
|
transition: background .15s, color .15s;
|
|
}
|
|
.aa-segmented-item:hover:not(.is-active):not(.is-disabled) { color: #2F54EB; }
|
|
.aa-segmented-item.is-active { background: #fff; color: #262626; box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }
|
|
.aa-segmented-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }
|
|
</style>
|