选项卡新增页面产生

v1.2.0
于肖磊 2025-02-14 09:59:08 +08:00
parent 95ed3972bd
commit 891ada2f83
10 changed files with 50 additions and 3 deletions

View File

@ -1,5 +1,5 @@
<template>
<div class="flex-row gap-10 jc-sb align-c">
<div :class="`flex-row gap-10 align-c ${ form.justification == 'center' ? 'jc-c' : form.justification == 'right' ? 'jc-e': 'jc-sb' }`">
<div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;height: ${tabs_height}`">
<template v-for="(item, index) in form.tabs_list" :key="index">
<div class="item nowrap ma-auto" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" style="flex:0 0 auto;">
@ -37,7 +37,7 @@
</div>
</template>
</div>
<icon v-if="isTabs" :name="new_style.more_icon_class || 'category-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'" :styles="padding_bottom"></icon>
<icon v-if="isTabs && form.show_more !== '0'" :name="new_style.more_icon_class || 'category-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'" :styles="padding_bottom"></icon>
</div>
</template>

View File

@ -5,6 +5,13 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="对齐方式">
<el-radio-group v-model="form.justification" @change="tabs_theme_change">
<el-radio value="left">居左</el-radio>
<el-radio value="center">居中</el-radio>
<el-radio value="right">居右</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选项卡置顶">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />

View File

@ -5,6 +5,13 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">选项卡设置</div>
<el-form-item label="对齐方式">
<el-radio-group v-model="form.justification" @change="tabs_theme_change">
<el-radio value="left">居左</el-radio>
<el-radio value="center">居中</el-radio>
<el-radio value="right">居右</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="置顶">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />

View File

@ -5,6 +5,13 @@
<div class="divider-line"></div>
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="对齐方式">
<el-radio-group v-model="form.justification" @change="tabs_theme_change">
<el-radio value="left">居左</el-radio>
<el-radio value="center">居中</el-radio>
<el-radio value="right">居右</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选项卡置顶">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />

View File

@ -17,6 +17,16 @@
<el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
<upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
</el-form-item>
<el-form-item label="对齐方式">
<el-radio-group v-model="form.justification" @change="tabs_theme_change">
<el-radio value="left">居左</el-radio>
<el-radio value="center">居中</el-radio>
<el-radio value="right">居右</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="更多按钮">
<el-switch v-model="form.show_more" class="mr-10" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="滑动置顶">
<el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>滑动置顶仅手机端有效</span>" raw-content placement="top">

View File

@ -45,6 +45,7 @@ interface DefaultArticleTabs {
subscript_icon_class: string;
subscript_text: string;
name_float: string;
justification: string;
};
style: {
tabs_one_theme: string;
@ -138,6 +139,8 @@ const defaultArticleTabs: DefaultArticleTabs = {
content_top: {
...commonTop,
},
// 对齐方式
justification: 'left',
tabs_theme: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
@ -162,7 +165,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
name_float: '0',
name_float: '0'
},
style: {
tabs_one_theme: '0',

View File

@ -22,6 +22,7 @@ interface articleTabsList {
}
interface DefaultProductList {
content: {
justification: string;
content_top: object;
tabs_theme: string;
tabs_adorn_icon: string;
@ -140,6 +141,8 @@ const defaultProductList: DefaultProductList = {
content_top: {
...commonTop,
},
// 对齐方式
justification: 'left',
// 选项卡风格
tabs_theme: '0',
// 选中装饰图标

View File

@ -48,6 +48,7 @@ interface DefaultProductList {
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
justification: string;
};
style: {
tabs_one_theme: string;
@ -154,6 +155,7 @@ const defaultProductList: DefaultProductList = {
content_top: {
...commonTop,
},
justification: 'left',
// 选项卡风格
tabs_theme: '0',
// 选中装饰图标

View File

@ -31,6 +31,8 @@ interface carousel_list {
interface defaultTabs {
content: {
content_top: object;
justification: string,
show_more: string,
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
@ -124,6 +126,8 @@ const defaultTabs: defaultTabs = {
content_top: {
...commonTop,
},
justification: 'left',
show_more: '1',
// 选项卡风格
tabs_theme: '0',
// 选中装饰图标

View File

@ -17,6 +17,8 @@ interface tabs_page {
interface defaultTabs {
content: {
content_top: object;
justification: string,
show_more: string,
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
@ -59,6 +61,8 @@ const defaultTabs: defaultTabs = {
content_top: {
...commonTop,
},
justification: 'left',
show_more: '1',
tabs_theme: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',