<template>
|
<div class="checkbox-action-sheet">
|
<div class="checkbox-action-sheet-title">{{ title }}</div>
|
<nut-checkbox-group v-model="model" :max="max">
|
<nut-checkbox v-for="item in columns" :key="item.value" :label="item.value" icon-size="16">
|
{{ item.label }}</nut-checkbox
|
>
|
</nut-checkbox-group>
|
<div class="checkbox-action-sheet-footer">
|
<nut-button type="primary" plain @click="handleCancel">取消</nut-button>
|
<nut-button type="primary" @click="handleConfirm">确定</nut-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
defineOptions({
|
name: 'CheckboxActionSheet',
|
});
|
|
type Props = {
|
max?: number;
|
title?: string;
|
columns?: API.SelectOptionStringGetDictionaryDataSelectQueryResultOption[];
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const emit = defineEmits<{
|
(e: 'update:modelValue', value: Array<string | number>): void;
|
(e: 'update:visible', value: boolean): void;
|
}>();
|
|
const model = defineModel<Array<string | number>>();
|
const visible = defineModel<boolean>('visible');
|
|
function handleCancel() {
|
model.value = [];
|
emit('update:visible', false);
|
}
|
|
function handleConfirm() {
|
emit('update:visible', false);
|
emit('update:modelValue', model.value);
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.checkbox-action-sheet {
|
padding: 30px 30px 0;
|
|
.checkbox-action-sheet-title {
|
font-size: 32px;
|
text-align: center;
|
margin-bottom: 30px;
|
color: #2878ff;
|
}
|
|
.nut-checkbox-group {
|
padding-bottom: 30rpx;
|
max-height: 400px;
|
min-height: 200px;
|
|
.nut-checkbox {
|
margin-bottom: 20rpx;
|
|
.nut-checkbox__label {
|
margin-left: 10rpx;
|
}
|
}
|
}
|
|
.checkbox-action-sheet-footer {
|
--nut-button-default-padding: 0 80px;
|
|
display: flex;
|
justify-content: space-around;
|
|
.nut-button--primary {
|
border-width: 1px;
|
}
|
}
|
}
|
</style>
|
