sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

指示器逻辑修改

v1.2.0
于肖磊 2025-01-06 10:48:16 +08:00
parent c7d80c6822
commit 18418737ce
6 changed files with 54 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/common/custom-module/model-custom-group/index.vue
View File

@ -48,7 +48,7 @@
</div>
</template>
<script setup lang="ts">
import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer, get_is_eligible } from '@/utils';
import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer, get_is_eligible, get_indicator_location } from '@/utils';
import { isEmpty } from 'lodash';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
@ -100,6 +100,7 @@ const is_show = computed(() => {
return get_is_eligible(field_list, condition, props);
});
//#region 自定义组真实数据
const data_source_content_list = computed(() => {
if (!isEmpty(props.sourceList)) {
const data_source_id = form.value.data_source_field.id;
@ -125,6 +126,7 @@ const get_nested_property = (obj: any, path: string) => {
// 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
return keys.reduce((o, key) => (o != null && o[key] != null ? o[key] : []), obj) ?? [];
}
// #endregion
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style) + 'overflow: auto;');
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
@ -237,30 +239,7 @@ const slideChange = (swiper: { realIndex: number }) => {
//#endregion
//#region 指示器位置
// 根据指示器的位置来处理 对齐方式的处理
const indicator_location_style = computed(() => {
const { indicator_new_location, indicator_location, indicator_bottom } = new_style.value;
let styles = '';
if (['left', 'right'].includes(indicator_new_location)) {
if (indicator_location == 'flex-start') {
styles += `top: 0px;`;
} else if (indicator_location == 'center') {
styles += `top: 50%; transform: translateY(-50%);`;
} else {
styles += `bottom: 0px;`;
}
} else {
if (indicator_location == 'flex-start') {
styles += `left: 0px;`;
} else if (indicator_location == 'center') {
styles += `left: 50%; transform: translateX(-50%);`;
} else {
styles += `right: 0px;`;
}
}
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
return styles;
});
const indicator_location_style = computed(() => get_indicator_location(new_style.value));
//#endregion
</script>
<style lang="scss" scoped>

27
src/components/model-carousel/index.vue
View File

@ -74,7 +74,7 @@
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer, common_img_computer, background_computer } from '@/utils';
import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer, common_img_computer, background_computer, get_indicator_location } from '@/utils';
import { isEmpty, cloneDeep, throttle } from 'lodash';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, EffectCoverflow } from 'swiper/modules';
@ -128,30 +128,7 @@ const indicator_style = computed(() => {
return indicator_styles;
});
// 根据指示器的位置来处理 对齐方式的处理
const indicator_location_style = computed(() => {
const { indicator_new_location, indicator_location, indicator_bottom } = new_style.value;
let styles = '';
if (['left', 'right'].includes(indicator_new_location)) {
if (indicator_location == 'flex-start') {
styles += `top: 0px;`;
} else if (indicator_location == 'center') {
styles += `top: 50%; transform: translateY(-50%);`;
} else {
styles += `bottom: 0px;`;
}
} else {
if (indicator_location == 'flex-start') {
styles += `left: 0px;`;
} else if (indicator_location == 'center') {
styles += `left: 50%; transform: translateX(-50%);`;
} else {
styles += `right: 0px;`;
}
}
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
return styles;
});
const indicator_location_style = computed(() => get_indicator_location(new_style.value));
//#endregion
const seat_list = computed(() => {
let seat_list = [];

27
src/components/model-custom/index.vue
View File

@ -49,7 +49,7 @@
</template>
<script setup lang="ts">
import { isEmpty, cloneDeep } from 'lodash';
import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer } from '@/utils';
import { border_width, common_img_computer, common_styles_computer, get_indicator_location, get_math, radius_computer } from '@/utils';
import { source_list } from '@/config/const/custom';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
@ -217,30 +217,7 @@ const slideChange = (swiper: { realIndex: number }) => {
//#endregion
//#region 指示器位置
// 根据指示器的位置来处理 对齐方式的处理
const indicator_location_style = computed(() => {
const { indicator_new_location, indicator_location, indicator_bottom } = new_style.value;
let styles = '';
if (['left', 'right'].includes(indicator_new_location)) {
if (indicator_location == 'flex-start') {
styles += `top: 0px;`;
} else if (indicator_location == 'center') {
styles += `top: 50%; transform: translateY(-50%);`;
} else {
styles += `bottom: 0px;`;
}
} else {
if (indicator_location == 'flex-start') {
styles += `left: 0px;`;
} else if (indicator_location == 'center') {
styles += `left: 50%; transform: translateX(-50%);`;
} else {
styles += `right: 0px;`;
}
}
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
return styles;
});
const indicator_location_style = computed(() => get_indicator_location(new_style.value));
//#endregion
</script>
<style lang="scss" scoped>

32
src/components/model-data-magic/index.vue
View File

@ -106,7 +106,7 @@
<script setup lang="ts">
import customIndex from './components/custom/index.vue';
import videoIndex from './components/video/index.vue';
import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow, border_width } from '@/utils';
import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow, border_width, get_indicator_location } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -217,33 +217,6 @@ const indicator_style = (item: any) => {
}
return styles;
};
//#region 指示器位置
// 根据指示器的位置来处理 对齐方式的处理
const indicator_location_style = (item: any) => {
const { indicator_new_location, indicator_location, indicator_bottom } = item;
let styles = '';
if (['left', 'right'].includes(indicator_new_location)) {
if (indicator_location == 'flex-start') {
styles += `top: 0px;`;
} else if (indicator_location == 'center') {
styles += `top: 50%; transform: translateY(-50%);`;
} else {
styles += `bottom: 0px;`;
}
} else {
if (indicator_location == 'flex-start') {
styles += `left: 0px;`;
} else if (indicator_location == 'center') {
styles += `left: 50%; transform: translateX(-50%);`;
} else {
styles += `right: 0px;`;
}
}
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
return styles;
};
//#endregion
const style_actived_color = (item: any, index: number) => {
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
}
@ -382,7 +355,8 @@ watch(props.value.content, (val) => {
item.actived_index = 0;
// 指示器样式
data_style.indicator_styles = indicator_style(data_style);
data_style.indicator_location_styles = indicator_location_style(data_style);
// 根据指示器的位置来处理
data_style.indicator_location_styles = get_indicator_location(data_style);
// 获取当前的margin
const chunk_margin = data_style?.chunk_margin || old_margin;
// 计算左右间距

27
src/components/model-nav-group/index.vue
View File

@ -29,7 +29,7 @@
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, radius_computer, get_math, common_img_computer, padding_computer } from '@/utils';
import { common_styles_computer, radius_computer, get_math, common_img_computer, padding_computer, get_indicator_location } from '@/utils';
import { isEmpty, cloneDeep, throttle } from 'lodash';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
@ -88,30 +88,7 @@ const indicator_style = computed(() => {
return indicator_styles;
});
// 根据指示器的位置来处理 对齐方式的处理
const indicator_location_style = computed(() => {
const { indicator_new_location, indicator_location, indicator_bottom } = new_style.value;
let styles = '';
if (['left', 'right'].includes(indicator_new_location)) {
if (indicator_location == 'flex-start') {
styles += `top: 0px;`;
} else if (indicator_location == 'center') {
styles += `top: 50%; transform: translateY(-50%);`;
} else {
styles += `bottom: 0px;`;
}
} else {
if (indicator_location == 'flex-start') {
styles += `left: 0px;`;
} else if (indicator_location == 'center') {
styles += `left: 50%; transform: translateX(-50%);`;
} else {
styles += `right: 0px;`;
}
}
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
return styles;
});
const indicator_location_style = computed(() => get_indicator_location(new_style.value));
//#endregion
// 导航间距
const nav_space = computed(() => `row-gap:${ new_style.value?.space || '0' }px;`);

41
src/utils/index.ts
View File

@ -218,6 +218,47 @@ const compare_numbers = (a: number, b: number, type: string): boolean => {
}
}
/**
* 根据新的样式对象计算指示器的位置样式
*
* 此函数根据指示器的新位置和当前位置以及底部距离来生成相应的CSS样式
* 它处理的是一个包含指示器位置信息的对象，并返回一个字符串形式的CSS样式
*
* @param new_style 包含指示器新位置和当前位置及底部距离的样式对象
* @returns 返回计算出的指示器位置CSS样式字符串
*/
type indicator_data = { indicator_new_location: string, indicator_location: string, indicator_bottom: number }
export const get_indicator_location = (new_style: indicator_data) => {
// 解构指示器的位置信息
const { indicator_new_location = '', indicator_location = '', indicator_bottom = 0 } = new_style;
let styles = '';
// 根据指示器的新位置是水平方向（left或right）还是垂直方向（默认）来决定如何设置样式
if (['left', 'right'].includes(indicator_new_location)) {
// 如果是水平方向，根据指示器的当前位置设置top、center或bottom样式
if (indicator_location == 'flex-start') {
styles += `top: 0px;`;
} else if (indicator_location == 'center') {
styles += `top: 50%; transform: translateY(-50%);`;
} else {
styles += `bottom: 0px;`;
}
} else {
// 如果是垂直方向，根据指示器的当前位置设置left、center或right样式
if (indicator_location == 'flex-start') {
styles += `left: 0px;`;
} else if (indicator_location == 'center') {
styles += `left: 50%; transform: translateX(-50%);`;
} else {
styles += `right: 0px;`;
}
}
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
// 返回计算出的指示器位置样式
return styles;
}
/**
* 判断给定条件是否符合资格，主要用于自定义内部各个组件是否符合显示条件
* @param field_list 字段列表，包含各个字段的数据