47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<template>
|
|
<div class="aa-segmented">
|
|
<button
|
|
v-for="opt in options" :key="opt.value"
|
|
class="aa-segmented-item"
|
|
:class="{ 'is-active': value === 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>
|
|
export default {
|
|
name: 'AaSegmented',
|
|
props: {
|
|
value: { type: [String, Number], default: '' },
|
|
options: { type: Array, required: true } // [{ label, value, icon?, disabled? }]
|
|
},
|
|
methods: {
|
|
choose(opt) {
|
|
if (opt.disabled) return;
|
|
this.$emit('input', opt.value);
|
|
this.$emit('change', opt.value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- 样式对齐 组件2.txt Segmented 规范 -->
|
|
<style>
|
|
.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>
|