<template>
|
<scroll-view :scroll-y="true" class="nut-category-pane">
|
<div class="nut-category-pane__cateListRight">
|
<div v-for="(item, index) in categoryChild" :key="index">
|
<div class="nut-category-pane__childItemList">
|
<div class="bole-category-pane__childItem" @click="onChange(item.id)">
|
<div
|
class="bole-category-pane-item-wrapper"
|
:class="{ active: modelValue.includes(item.id) }"
|
>
|
<div class="bole-category-pane-item-name">{{ item.name }}</div>
|
<Check :size="16" class="bole-category-pane-item-icon" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</scroll-view>
|
</template>
|
|
<script setup lang="ts">
|
import { Check } from '@nutui/icons-vue-taro';
|
import { PropType } from 'vue';
|
import { Message } from '@12333/utils';
|
|
defineOptions({
|
name: 'CategoryPane',
|
});
|
|
type ChildType = {
|
name?: string;
|
id?: string | number;
|
[key: string]: any;
|
};
|
|
const props = defineProps({
|
//右侧导航数据
|
categoryChild: {
|
type: Array as PropType<ChildType[]>,
|
default: () => [] as ChildType[],
|
},
|
|
modelValue: {
|
type: Array as PropType<(string | number)[]>,
|
default: () => [] as (string | number)[],
|
},
|
|
multiple: {
|
type: Boolean,
|
default: true,
|
},
|
|
max: {
|
type: Number,
|
},
|
});
|
|
const emit = defineEmits<{
|
(e: 'onChange', value: string | number): void;
|
(e: 'update:modelValue', value: (string | number)[]): void;
|
}>();
|
|
const onChange = (value: string | number) => {
|
if (props.multiple) {
|
if (props.modelValue.includes(value)) {
|
emit(
|
'update:modelValue',
|
props.modelValue.filter((x) => x !== value)
|
);
|
} else {
|
if (props.modelValue.length >= props.max) {
|
Message.warning(`最多选${props.max}项`);
|
return;
|
}
|
emit('update:modelValue', [...props.modelValue, value]);
|
}
|
} else {
|
if (props.modelValue.includes(value)) {
|
emit('update:modelValue', []);
|
} else {
|
emit('update:modelValue', [value]);
|
}
|
}
|
|
emit('onChange', value);
|
};
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.nut-category-pane__cateListRight {
|
padding-left: 0;
|
}
|
|
.category__cateListItemChecked,
|
.nut-category__cateListItem {
|
color: boleGetCssVar('text-color', 'primary');
|
@include ellipsis;
|
}
|
|
.bole-category-pane__childItem {
|
width: 100%;
|
}
|
|
.bole-category-pane-item-wrapper {
|
padding: 0 32px;
|
display: flex;
|
align-items: center;
|
|
&:active {
|
background: rgba(0, 0, 0, 0.1);
|
}
|
|
.bole-category-pane-item-name {
|
flex: 1;
|
min-width: 0;
|
height: 96px;
|
line-height: 96px;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'primary');
|
@include ellipsis;
|
}
|
|
.bole-category-pane-item-icon {
|
color: boleGetCssVar('color', 'primary');
|
display: none;
|
}
|
|
&.active {
|
.bole-category-pane-item-name {
|
color: boleGetCssVar('color', 'primary');
|
}
|
|
.bole-category-pane-item-icon {
|
display: block;
|
}
|
}
|
}
|
</style>
|
