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

1.文章风格切换图片圆角优化 

sws 2024-08-27
v1.0.0
sws 2024-08-27 17:24:20 +08:00
parent b723103cdc
commit 3cde0af661
5 changed files with 61 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -96,7 +96,15 @@ const props = defineProps({
tabStyle: {
type: Object,
default: () => ({}),
}
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
const form = reactive(props.value);
const base_list = reactive({
@ -158,6 +166,23 @@ const article_theme_change = (val: any) => {
} else {
form.field_show = ['0', '1'];
}
if (val == '0') {
if (styles.img_radius.radius == props.defaultConfig.img_radius_0 || (styles.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.img_radius.radius = props.defaultConfig.img_radius_0;
styles.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
styles.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
styles.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
styles.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (styles.img_radius.radius == props.defaultConfig.img_radius_0 || (styles.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.img_radius.radius = props.defaultConfig.img_radius_1;
styles.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
styles.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
styles.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
styles.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
};
// 开启关闭链接
@ -216,7 +241,7 @@ const url_value_dialog_call_back = (item: any[]) => {
};
const styles = reactive(props.tabStyle);
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
};
</script>

9
src/components/model-article-tabs/model-article-tabs-setting.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-article-tabs-content :value="value.content" :tab-style="value.style"></model-article-tabs-content>
<model-article-tabs-content :value="value.content" :tab-style="value.style" :default-config="data_config"></model-article-tabs-content>
</template>
<template v-else-if="type == '2'">
<model-article-tabs-styles :value="value.style" :content="value.content"></model-article-tabs-styles>
<model-article-tabs-styles :value="value.style" :content="value.content" :default-config="data_config"></model-article-tabs-styles>
</template>
</div>
</template>
@ -19,4 +19,9 @@ const props = defineProps({
default: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
</script>

25
src/components/model-article-tabs/model-article-tabs-styles.vue
View File

@ -67,6 +67,14 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
@ -76,6 +84,23 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const theme = computed(() => data.value.theme);
if (theme.value == '0') {
if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.img_radius.radius = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.img_radius.radius = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
const font_weight = reactive([
{ name: '加粗', value: '500' },
{ name: '正常', value: '400' },

2
src/layout/components/main/default/article-list.ts
View File

@ -71,7 +71,7 @@ const defaultArticleList: DefaultArticleList = {
radius_bottom_left: 8,
radius_bottom_right: 8,
},
// 图片圆角
// 图片圆角 ---- 除了风格一圆角是4，其他都是0
img_radius: {
radius: 4,
radius_top_left: 4,

2
src/layout/components/main/default/article-tabs.ts
View File

@ -97,7 +97,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
radius_bottom_left: 8,
radius_bottom_right: 8,
},
// 图片圆角
// 图片圆角 ---- 除了风格一圆角是4，其他都是0
img_radius: {
radius: 4,
radius_top_left: 4,