43 lines
952 B
Vue
43 lines
952 B
Vue
<template>
|
|
<button
|
|
class="batch-selection-mark"
|
|
:class="{ 'batch-selection-mark--selected': selected }"
|
|
role="checkbox"
|
|
:aria-checked="selected"
|
|
:aria-label="`${selected ? '取消选择' : '选择'}${label}`"
|
|
@click.stop="$emit('toggle')"
|
|
>
|
|
{{ selected ? "已选择" : "选择" }}
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
selected: { type: Boolean, default: false },
|
|
label: { type: String, required: true },
|
|
});
|
|
defineEmits(["toggle"]);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.batch-selection-mark {
|
|
min-width: 100rpx;
|
|
min-height: 64rpx;
|
|
margin: 0;
|
|
padding: 0 16rpx;
|
|
border: 1rpx solid rgba(159, 35, 35, 0.34);
|
|
border-radius: 8rpx;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
color: $brand-red;
|
|
font-size: clamp(12px, 20rpx, 15px);
|
|
line-height: 64rpx;
|
|
}
|
|
.batch-selection-mark::after {
|
|
border: 0;
|
|
}
|
|
.batch-selection-mark--selected {
|
|
background: $brand-red;
|
|
color: #fffaf0;
|
|
}
|
|
</style>
|