修改选项卡轮播的显示处理
于肖磊
parent
231e875a45
commit
709fcd5d64
|
|
@ -198,11 +198,12 @@ watchEffect(() => {
|
|||
if (!isEmpty(data_source_content_list.value)) {
|
||||
num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col));
|
||||
}
|
||||
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
|
||||
// 轮播图高度控制
|
||||
if (form.value.data_source_direction == 'horizontal') {
|
||||
swiper_height.value = props.dataHeight * custom_scale.value;
|
||||
swiper_height.value = props.dataHeight * custom_scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
|
||||
} else {
|
||||
swiper_height.value = (props.dataHeight * custom_scale.value) * col + ((data_source_carousel_col - 1) * space_between.value);
|
||||
swiper_height.value = (props.dataHeight * custom_scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value);
|
||||
}
|
||||
dot_list.value = Array(num);
|
||||
// 更新轮播图的key，确保更换时能重新更新轮播图
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
<el-form-item label="内间距">
|
||||
<padding :value="form.carousel_content_padding"></padding>
|
||||
</el-form-item>
|
||||
<!-- 边框处理 -->
|
||||
<border-config v-model:show="form.carousel_content.border_is_show" v-model:color="form.carousel_content.border_color" v-model:style="form.carousel_content.border_style" v-model:size="form.carousel_content.border_size"></border-config>
|
||||
<!-- 阴影配置 -->
|
||||
<shadow-config v-model="form.carousel_content"></shadow-config>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -177,11 +177,12 @@ watchEffect(() => {
|
|||
if (!isEmpty(data_source_content_list.value)) {
|
||||
num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col));
|
||||
}
|
||||
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
|
||||
// 轮播图高度控制
|
||||
if (form.value.data_source_direction == 'horizontal') {
|
||||
swiper_height.value = form.value.height * scale.value;
|
||||
swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
|
||||
} else {
|
||||
swiper_height.value = (form.value.height * scale.value) * col + ((data_source_carousel_col - 1) * space_between.value);
|
||||
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value);
|
||||
}
|
||||
dot_list.value = Array(num);
|
||||
// 更新轮播图的key，确保更换时能重新更新轮播图
|
||||
|
|
|
|||
|
|
@ -217,11 +217,13 @@ watchEffect(() => {
|
|||
const col = data_source_content_list.value.length > carousel_col ? carousel_col : data_source_content_list.value.length;
|
||||
// 一屏显示的数量
|
||||
slides_per_view.value = col;
|
||||
const { margin_bottom, margin_top } = new_style.value.data_chunk_margin;
|
||||
const { padding_top, padding_bottom } = new_style.value.data_chunk_padding;
|
||||
// 轮播图高度控制
|
||||
if (form.value.data_source_direction == '2') {
|
||||
swiper_height.value = form.value.height * scale.value;
|
||||
swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
|
||||
} else {
|
||||
swiper_height.value = (form.value.height * scale.value) * col + ((carousel_col - 1) * space_between.value);
|
||||
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((carousel_col - 1) * space_between.value);
|
||||
}
|
||||
// 更新轮播图的key，确保更换时能重新更新轮播图
|
||||
carouselKey.value = get_math();
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer } from '@/utils';
|
||||
import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer, box_shadow_computer, border_computer } from '@/utils';
|
||||
import { cloneDeep, isEmpty } from 'lodash';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
|
|
@ -48,7 +48,8 @@ watch(
|
|||
background_img_style: new_style.tabs_bg_background_img_style,
|
||||
background_img: new_style.tabs_bg_background_img,
|
||||
}
|
||||
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius);
|
||||
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content);
|
||||
console.log(new_style.tabs_margin);
|
||||
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
|
||||
// 轮播区域背景设置
|
||||
const carousel_content_data = {
|
||||
|
|
@ -57,7 +58,7 @@ watch(
|
|||
background_img_style: new_style.carousel_content_background_img_style,
|
||||
background_img: new_style.carousel_content_background_img,
|
||||
}
|
||||
carousel_container.value = gradient_computer(carousel_content_data) + margin_computer(new_style.carousel_content_margin) + radius_computer(new_style.carousel_content_radius);
|
||||
carousel_container.value = gradient_computer(carousel_content_data) + margin_computer(new_style.carousel_content_margin) + radius_computer(new_style.carousel_content_radius) + box_shadow_computer(new_style.carousel_content) + border_computer(new_style.carousel_content);
|
||||
carousel_img_container.value = background_computer(carousel_content_data) + padding_computer(new_style.carousel_content_padding);
|
||||
// 处理数据
|
||||
new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];
|
||||
|
|
|
|||
|
|
@ -50,9 +50,16 @@
|
|||
<el-form-item label="圆角">
|
||||
<radius :value="form.tabs_radius"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item label="外边距">
|
||||
<margin :value="form.tabs_margin"></margin>
|
||||
</el-form-item>
|
||||
<el-form-item label="内边距">
|
||||
<padding :value="form.tabs_padding"></padding>
|
||||
</el-form-item>
|
||||
<!-- 边框处理 -->
|
||||
<border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
|
||||
<!-- 阴影配置 -->
|
||||
<shadow-config v-model="form.tabs_content"></shadow-config>
|
||||
</template>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,9 @@ interface defaultTabs {
|
|||
tabs_bg_background_img_style: string,
|
||||
tabs_bg_background_img: string[],
|
||||
tabs_radius: radiusStyle;
|
||||
tabs_margin: marginStyle;
|
||||
tabs_padding: paddingStyle;
|
||||
tabs_content: object;
|
||||
carousel_content_direction: string;
|
||||
carousel_content_color_list: color_list[];
|
||||
carousel_content_background_img_style: string;
|
||||
|
|
@ -72,6 +74,7 @@ interface defaultTabs {
|
|||
carousel_content_radius: radiusStyle;
|
||||
carousel_content_margin: marginStyle;
|
||||
carousel_content_padding: paddingStyle;
|
||||
carousel_content: object;
|
||||
more_icon_class: string;
|
||||
more_icon_color: string;
|
||||
more_icon_size: number;
|
||||
|
|
@ -230,6 +233,13 @@ const defaultTabs: defaultTabs = {
|
|||
radius_bottom_left: 0,
|
||||
radius_bottom_right: 0,
|
||||
},
|
||||
tabs_margin: {
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
margin_right: 0,
|
||||
},
|
||||
tabs_padding: {
|
||||
padding: 10,
|
||||
padding_top: 10,
|
||||
|
|
@ -237,6 +247,25 @@ const defaultTabs: defaultTabs = {
|
|||
padding_left: 10,
|
||||
padding_right: 10,
|
||||
},
|
||||
tabs_content: {
|
||||
// 边框样式
|
||||
border_is_show: '0',
|
||||
border_color: '#FF3F3F',
|
||||
border_style: 'solid',
|
||||
border_size: {
|
||||
padding: 1,
|
||||
padding_top: 1,
|
||||
padding_right: 1,
|
||||
padding_bottom: 1,
|
||||
padding_left: 1,
|
||||
},
|
||||
// 阴影
|
||||
box_shadow_color: '',
|
||||
box_shadow_x: 0,
|
||||
box_shadow_y: 0,
|
||||
box_shadow_blur: 0,
|
||||
box_shadow_spread: 0,
|
||||
},
|
||||
// 轮播内间距设置
|
||||
carousel_content_direction: '90deg',
|
||||
carousel_content_color_list: [{ color: '', color_percentage: undefined }],
|
||||
|
|
@ -263,6 +292,25 @@ const defaultTabs: defaultTabs = {
|
|||
padding_left: 10,
|
||||
padding_right: 10,
|
||||
},
|
||||
carousel_content: {
|
||||
// 边框样式
|
||||
border_is_show: '0',
|
||||
border_color: '#FF3F3F',
|
||||
border_style: 'solid',
|
||||
border_size: {
|
||||
padding: 1,
|
||||
padding_top: 1,
|
||||
padding_right: 1,
|
||||
padding_bottom: 1,
|
||||
padding_left: 1,
|
||||
},
|
||||
// 阴影
|
||||
box_shadow_color: '',
|
||||
box_shadow_x: 0,
|
||||
box_shadow_y: 0,
|
||||
box_shadow_blur: 0,
|
||||
box_shadow_spread: 0,
|
||||
},
|
||||
// 更多设置
|
||||
more_icon_class: 'category-more',
|
||||
more_icon_color: '#000',
|
||||
|
|
|
|||
Loading…
Reference in New Issue