1.代码优化
parent
3b9f3aa4aa
commit
eee8a52759
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue