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

修改选项卡显示问题

v1.0.0
于肖磊 2024-08-26 18:52:35 +08:00
parent 84dd8d76a6
commit 03e2ff8fc6
10 changed files with 58 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/tabs-view/index.vue
View File

@ -139,10 +139,10 @@ const tabs_theme_style = computed(() => {
padding-bottom: 1.8rem;
&.active {
.title {
color: red;
color: #FF2222;
}
.icon {
color: red;
color: #FF2222;
display: block;
}
}

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

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="选项卡风格">
<el-radio-group v-model="form.tabs_theme">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -84,7 +84,7 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { get_math, tabs_style } from '@/utils';
import ArticleAPI from '@/api/article';
import { articleStore } from '@/store/article';
const article_store = articleStore();
@ -93,6 +93,10 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
tabStyle: {
type: Object,
default: () => ({}),
}
});
const form = reactive(props.value);
const base_list = reactive({
@ -210,6 +214,11 @@ const url_value_dialog_call_back = (item: any[]) => {
});
});
};
const styles = reactive(props.tabStyle);
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
};
</script>
<style lang="scss" scoped>
.content {

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

@ -1,7 +1,7 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-article-tabs-content :value="value.content"></model-article-tabs-content>
<model-article-tabs-content :value="value.content" :tab-style="value.style"></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>

15
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="选项卡风格">
<el-radio-group v-model="form.tabs_theme">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -83,7 +83,7 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { get_math, tabs_style } from '@/utils';
import ShopAPI from '@/api/shop';
import { shopStore } from '@/store';
const shop_store = shopStore();
@ -93,12 +93,17 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
tabStyle: {
type: Object,
default: () => ({}),
}
});
const state = reactive({
form: props.value,
styles: props.tabStyle,
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const { form, styles } = toRefs(state);
const base_list = reactive({
tabs_style_list: [
@ -217,6 +222,10 @@ const url_value_dialog_call_back = (item: any[]) => {
});
});
};
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
// 选择某些风格时， 切换到对应的按钮
const change_style = (val: any): void => {
form.value.theme = val;

2
src/components/model-shop-tabs/model-shop-tabs-setting.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-shop-tabs-content :value="value.content"></model-shop-tabs-content>
<model-shop-tabs-content :value="value.content" :tab-style="value.style"></model-shop-tabs-content>
</template>
<template v-if="type == '2'">
<model-shop-tabs-styles :value="value.style" :content="value.content"></model-shop-tabs-styles>

2
src/components/model-shop-tabs/model-shop-tabs-styles.vue
View File

@ -10,7 +10,7 @@
<text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
<color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
</el-form-item>
<el-form-item label="未选文字">
<text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>

16
src/components/model-tabs/model-tabs-content.vue
View File

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.tabs_theme" class="ml-4">
<el-radio-group v-model="form.tabs_theme" class="ml-4" @change="tabs_theme_change">
<el-radio value="0">样式一</el-radio>
<el-radio value="2">样式二</el-radio>
<el-radio value="3">样式三</el-radio>
@ -44,19 +44,24 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { get_math, tabs_style } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => {},
},
tabStyle: {
type: Object,
default: () => ({}),
}
});
const state = reactive({
form: props.value
form: props.value,
styles: props.tabStyle
});
const { form } = toRefs(state);
const { form, styles } = toRefs(state);
const add = () => {
form.value.tabs_list.push({
id: get_math(),
@ -75,6 +80,9 @@ const remove = (index: number) => {
const on_sort = (new_list: nav_group[]) => {
form.value.tabs_list = new_list;
}
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
</script>
<style lang="scss" scoped>
.card.mb-8 {

2
src/components/model-tabs/model-tabs-setting.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-tabs-content :value="value.content"></model-tabs-content>
<model-tabs-content :value="value.content" :tab-style="value.style"></model-tabs-content>
</template>
<template v-if="type == '2'">
<model-tabs-styles :value="value.style"></model-tabs-styles>

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

@ -82,7 +82,7 @@ const defaultProductList: DefaultProductList = {
tabs_direction: '90deg',
tabs_weight_checked: '500',
tabs_size_checked: 14,
tabs_color_checked: '#000',
tabs_color_checked: 'rgba(51,51,51,1)',
tabs_weight: '500',
tabs_size: 14,
tabs_color: 'rgba(51,51,51,1)',

16
src/utils/index.ts
View File

@ -299,3 +299,19 @@ export const set_cookie = (name: string, value: string, expire_time?: number) =>
document.cookie = cookie_str;
}
};
// style 风格
export const tabs_style = (color: string, style: string | number | boolean | undefined) => {
const color_list = ['rgba(51,51,51,1)', 'rgba(255, 34, 34, 1)', 'rgba(255, 255, 255, 1)'];
if (color_list.includes(color)) {
if ((style == '2' || style == '4')) {
return 'rgba(255, 255, 255, 1)';
} else if (style == '3') {
return 'rgba(255, 34, 34, 1)';
} else {
return 'rgba(51,51,51,1)';
}
} else {
return color;
}
}