1.代码优化

v1.0.0
sws 2024-10-10 11:46:13 +08:00
parent 3b9f3aa4aa
commit eee8a52759
7 changed files with 40 additions and 134 deletions

View File

@ -0,0 +1,18 @@
<template>
<el-radio-group v-model="modelValue" is-button>
<el-tooltip v-for="item in radio_list" :key="item.value" :content="item.name" placement="top" effect="light">
<el-radio-button :value="item.value"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</template>
<script setup lang="ts">
const modelValue = defineModel({ type: String, default: '' });
const radio_list = [
{ name: '居上', value: '0' },
{ name: '居下', value: '1' },
{ name: '居中', value: '2' },
{ name: '平铺', value: '3' },
{ name: '铺满', value: '4' },
];
</script>

View File

@ -10,23 +10,7 @@
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button @change="background_img_style_change">
<el-tooltip content="居上" placement="top" effect="light">
<el-radio-button value="0"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居下" placement="top" effect="light">
<el-radio-button value="1"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-radio-button value="2"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="3"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="4"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
<bg-btn-style v-model="form.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>

View File

@ -6,17 +6,7 @@
<mult-color-picker :key="form.carouselKey" :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
<bg-btn-style v-model="form.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.background_img" :limit="1"></upload>
</div>
@ -68,7 +58,7 @@ const props = defineProps({
isShowTitle: {
type: Boolean,
default: true,
}
},
});
const form = ref(props.value);
@ -79,19 +69,13 @@ const mult_color_picker_event = (arry: string[], type: number) => {
form.value.direction = type.toString();
};
const chunk_padding_change = (padding: any) => {
form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, [
'padding',
'padding_top',
'padding_bottom',
'padding_left',
'padding_right'
]));
form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
};
watchEffect(() => {
form.value = props.value;
tabs_content.value = props.content;
})
});
</script>
<style lang="scss" scoped>
.card.mb-8 {

View File

@ -58,17 +58,7 @@
<mult-color-picker :value="form.container_color_list" :type="form.container_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.container_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
<bg-btn-style v-model="form.container_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.container_background_img" :limit="1"></upload>
</div>
@ -83,7 +73,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from "lodash";
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -92,12 +82,12 @@ const props = defineProps({
content: {
type: Object,
default: () => {},
}
},
});
const state = reactive({
form: props.value,
substance: props.content
substance: props.content,
});
// 使toRefs
const { form, substance } = toRefs(state);

View File

@ -22,17 +22,7 @@
<mult-color-picker :value="form.search_botton_color_list" :type="form.search_botton_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.search_botton_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
<bg-btn-style v-model="form.search_botton_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.search_botton_background_img" :limit="1"></upload>
</div>
@ -79,7 +69,7 @@ const props = defineProps({
isShowCommon: {
type: Boolean,
default: true,
}
},
});
const state = reactive({
@ -98,24 +88,12 @@ const common_styles_update = (val: Object) => {
//
const button_radius_change = (radius: any) => {
form.value.search_button_radius = Object.assign(form.value.search_button_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
form.value.search_button_radius = Object.assign(form.value.search_button_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
};
//
const border_radius_change = (radius: any) => {
form.value.search_border_radius = Object.assign(form.value.search_border_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
form.value.search_border_radius = Object.assign(form.value.search_border_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.search_botton_color_list = arry;

View File

@ -25,23 +25,7 @@
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button :value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button :value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button :value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
<bg-btn-style v-model="form.header_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.header_background_img" :limit="1"></upload>
</div>
@ -169,7 +153,7 @@ const props = defineProps({
content: {
type: Object,
default: () => ({}),
}
},
});
//
@ -192,7 +176,7 @@ const base_list = {
rolling_fashion_list: [
{ name: '平移', value: 'translation' },
{ name: '切屏', value: 'cut-screen' },
]
],
};
const common_style_update = (value: any) => {

View File

@ -13,23 +13,7 @@
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button :value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button :value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button :value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
<bg-btn-style v-model="form.header_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.header_background_img" :limit="1"></upload>
</template>
@ -60,23 +44,7 @@
<mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.up_slide_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button :value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button :value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button :value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
<bg-btn-style v-model="form.up_slide_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.up_slide_background_img" :limit="1"></upload>
</div>
@ -159,14 +127,14 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
const up_slide_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.up_slide_background_color_list = arry;
form.value.up_slide_background_direction = type.toString();
}
};
const change_immersive_style = (val: string | number | boolean) => {
if (val === '0') {
common_store.set_is_immersion_model(false);
return;
}
common_store.set_is_immersion_model(true);
}
};
</script>
<style lang="scss" scoped>
.styles {