修改完成待测试
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user