1.测试优化修改

sws 2024-08-28
v1.0.0
sws 2024-08-29 14:52:28 +08:00
parent 96e2c98b5c
commit 0215b076ad
9 changed files with 50 additions and 40 deletions

View File

@ -1,6 +1,6 @@
<template>
<div class="flex-row align-c gap-12">
<el-color-picker v-model="color" :predefine="predefine_colors" @change="color_picker_change" />
<el-color-picker v-model="color" :predefine="predefine_colors" />
<icon name="reset" color="primary" size="16" :class="['c-pointer', { disable: color == defaultColor }]" @click="reset_event"></icon>
</div>
</template>
@ -17,11 +17,8 @@ const props = withDefaults(defineProps<Props>(), {
});
const color = defineModel({ type: String });
const emit = defineEmits(['update:value']);
const color_picker_change = (val: string | null) => {
emit('update:value', val);
};
const reset_event = () => {
console.log(1);
if (color.value == props.defaultColor) {
return;
} else {
@ -30,7 +27,6 @@ const reset_event = () => {
} else {
color.value = '';
}
emit('update:value', color.value);
}
};
</script>

View File

@ -37,7 +37,7 @@
<el-form-item v-if="isShadow" label="阴影设置">
<div class="flex-col gap-10 w">
<el-form-item label="颜色" label-width="45">
<color-picker v-model="form.box_shadow_color" @update:value="box_shadow_color_event"></color-picker>
<color-picker v-model="form.box_shadow_color"></color-picker>
</el-form-item>
<el-form-item label="X轴" label-width="45">
<slider v-model="form.box_shadow_x" :min="-20" :max="20"></slider>
@ -75,7 +75,7 @@ const props = defineProps({
isShadow: {
type: Boolean,
default: true,
}
},
});
//
interface color_form {
@ -139,10 +139,6 @@ const padding_change = (padding: any) => {
form = Object.assign(form, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
emit('update:value', form);
};
const box_shadow_color_event = (val: string) => {
form.box_shadow_color = val;
emit('update:value', form);
};
</script>
<style lang="scss" scoped>
.common-styles {

View File

@ -30,7 +30,7 @@
<el-switch v-model="form.bottom_up" />
</el-form-item>
</card-container>
<div class="bg-f5 partition-line" />
<div class="bg-f5 divider-line" />
<card-container class="h">
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
@ -131,7 +131,4 @@ watch(
width: 3rem;
height: 2rem;
}
.partition-line {
height: 0.8rem;
}
</style>

View File

@ -30,7 +30,7 @@
</el-select>
</el-form-item>
<el-form-item label="显示数量">
<el-input v-model="form.number" type="number" min="1" max="50" placeholder="请输入显示数量" clearable />
<el-input-number v-model="form.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="排序类型">
<el-radio-group v-model="form.sort">
@ -198,4 +198,9 @@ const url_value_dialog_call_back = (item: any[]) => {
width: 4rem;
height: 4rem;
}
.number-show {
:deep(.el-input__wrapper .el-input__inner) {
text-align: left;
}
}
</style>

View File

@ -17,7 +17,7 @@
</el-radio-group>
</el-form-item>
</card-container>
<card-container class="content-height">
<card-container class="content-height mb-8">
<div class="mb-12">选项卡设置</div>
<div class="nav-list">
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
@ -48,7 +48,7 @@
</el-select>
</el-form-item>
<el-form-item label="显示数量">
<el-input v-model="row.number" type="number" min="1" max="50" placeholder="请输入显示数量" clearable />
<el-input-number v-model="row.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="排序类型">
<el-radio-group v-model="row.sort">
@ -193,7 +193,11 @@ const tabs_list_click = (item: any, index: number) => {
};
//
const tabs_list_remove = (index: number) => {
form.tabs_list.splice(index, 1);
if (form.tabs_list.length > 1) {
form.tabs_list.splice(index, 1);
} else {
ElMessage.warning('至少保留一个选项卡');
}
};
const tabs_list_sort = (item: any) => {
//
@ -256,4 +260,9 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
width: 4rem;
height: 4rem;
}
.number-show {
:deep(.el-input__wrapper .el-input__inner) {
text-align: left;
}
}
</style>

View File

@ -17,7 +17,7 @@
</el-radio-group>
</el-form-item>
</card-container>
<card-container class="content-height">
<card-container class="content-height mb-8">
<div class="mb-12">选项卡设置</div>
<div class="nav-list">
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
@ -183,7 +183,11 @@ const tabs_list_click = (item: any, index: number) => {
};
//
const tabs_list_remove = (index: number) => {
form.value.tabs_list.splice(index, 1);
if (form.value.tabs_list.length > 1) {
form.value.tabs_list.splice(index, 1);
} else {
ElMessage.warning('至少保留一个选项卡');
}
};
const tabs_list_sort = (item: any) => {
form.value.tabs_list = item;
@ -265,7 +269,7 @@ const change_style = (val: any): void => {
const is_revise = ref(false);
const change_shop_type = () => {
is_revise.value = true;
}
};
</script>
<style lang="scss" scoped>
.content {

View File

@ -37,7 +37,7 @@
<url-value v-model="scoped.row.micro_page_list"></url-value>
</template>
<template v-else>
<url-value v-model="scoped.row.classify" :type="[ 'goods-category' ]"></url-value>
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
</template>
</el-form-item>
</div>
@ -59,12 +59,12 @@ const props = defineProps({
tabStyle: {
type: Object,
default: () => ({}),
}
},
});
const state = reactive({
form: props.value,
styles: props.tabStyle
styles: props.tabStyle,
});
const { form, styles } = toRefs(state);
const add = () => {
@ -76,17 +76,21 @@ const add = () => {
classify: {},
micro_page: '',
micro_page_list: [],
category_list: []
})
}
category_list: [],
});
};
const remove = (index: number) => {
form.value.tabs_list.splice(index, 1);
}
if (form.value.tabs_list.length > 1) {
form.value.tabs_list.splice(index, 1);
} else {
ElMessage.warning('至少保留一个选项卡');
}
};
//
const on_sort = (new_list: nav_group[]) => {
form.value.tabs_list = new_list;
}
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
};
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
</script>

View File

@ -148,6 +148,7 @@ const radio = ref('1'); // 创建一个响应式的数字变量初始值为0
.setting-content {
height: calc(100vh - 16.8rem);
overflow: auto;
background-color: #fff;
}
}
@media screen and (max-width: 1540px) {

View File

@ -248,13 +248,6 @@
::-webkit-scrollbar-thumb:hover {
background-color: #c7c9cc;
}
/*setting content和style的高度控制仅限只有一块区域的时候使用 */
.common-content-height {
height: calc(100vh - 16.8rem);
}
.common-style-height {
height: calc(100vh - 36.8rem);
}
.animate-linear {
transition: all 0.3s linear;
@ -264,3 +257,8 @@
.mask {
background-color: rgba(0, 0, 0, 0.2);
}
// 线
.divider-line {
height: 0.8rem;
}