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

选项卡背景色调整

v1.0.0
于肖磊 2024-08-27 10:42:09 +08:00
parent 49e70c7570
commit e984ec501a
2 changed files with 60 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div class="tabs flex-row oh">
<template v-for="(item, index) in tabs.content.tabs_list" :key="index">
<template v-for="(item, index) in form.tabs_list" :key="index">
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
@ -8,10 +8,10 @@
<template v-else>
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<div class="title" :style="index == 0 ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</div>
<div class="desc">{{ item.desc }}</div>
<icon name="checked-1" class="icon"></icon>
<div class="bottom_line" :style="tabs_theme_style.tabs_check"></div>
<div class="title" :style="title_style(index)">{{ item.title }}</div>
<div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
<icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
<div class="bottom_line" :style="tabs_check"></div>
</div>
</template>
</div>
@ -26,34 +26,66 @@ const props = defineProps({
default: () => ({}),
},
});
const tabs = ref(props.value);
// const tabs = ref(props.value);
// 用于页面判断显示
const state = reactive({
form: props.value.content,
new_style: props.value.style,
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
// 选中的值
const tabs_theme_index = computed(() => form.value.tabs_theme);
//选中的样式
const tabs_theme = computed(() => {
let tabs_theme = '';
if (tabs.value.content.tabs_theme == '1') {
if (form.value.tabs_theme == '1') {
tabs_theme = 'tabs-style-2';
} else if (tabs.value.content.tabs_theme == '2') {
} else if (form.value.tabs_theme == '2') {
tabs_theme = 'tabs-style-3';
} else if (tabs.value.content.tabs_theme == '3') {
} else if (form.value.tabs_theme == '3') {
tabs_theme = 'tabs-style-4';
} else if (tabs.value.content.tabs_theme == '4') {
} else if (form.value.tabs_theme == '4') {
tabs_theme = 'tabs-style-5';
} else {
tabs_theme = 'tabs-style-1';
}
return tabs_theme;
});
const tabs_theme_style = computed(() => {
// 选中的背景渐变色样式
const tabs_check = computed(() => {
const new_gradient_params = {
color_list: tabs.value.style.tabs_checked,
direction: tabs.value.style.tabs_direction,
color_list: new_style.value.tabs_checked,
direction: new_style.value.tabs_direction,
};
const new_style = {
tabs_check: gradient_computer(new_gradient_params),
tabs_title_checked: 'font-weight:' + tabs.value.style.tabs_weight_checked + ';' + 'font-size:' + tabs.value.style.tabs_size_checked + 'px;' + 'color:' + tabs.value.style.tabs_color_checked,
tabs_title: 'font-weight:' + tabs.value.style.tabs_weight + ';' + 'font-size:' + tabs.value.style.tabs_size + 'px;' + 'color:' + tabs.value.style.tabs_color,
};
return new_style;
return gradient_computer(new_gradient_params);
});
// 选中的内部样式
const tabs_theme_style = computed(() => {
return {
tabs_title_checked: `font-weight: ${ new_style.value.tabs_weight_checked };font-size: ${ new_style.value.tabs_size_checked}px;color:${ new_style.value.tabs_color_checked };`,
tabs_title: `font-weight: ${ new_style.value.tabs_weight };font-size: ${ new_style.value.tabs_size}px;color:${ new_style.value.tabs_color };`,
};
});
const title_style = (index: number) => {
// 默认是未选中的状态
let style = `${ tabs_theme_style.value.tabs_title }`;
if (index == 0) {
let checked_style = tabs_theme_style.value.tabs_title_checked;
if (['2', '4'].includes(tabs_theme_index.value)) {
checked_style += tabs_check.value;
}
style = checked_style;
}
return style;
};
// icon的渐变色处理
const icon_tabs_check = () => {
return `${ tabs_check.value };display: inline-block;line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
}
</script>
<style lang="scss" scoped>
.tabs {

18
src/components/model-tabs/model-tabs-styles.vue
View File

@ -6,17 +6,17 @@
<el-form-item label="选中装饰">
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中文字">
<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>
<el-form-item label="选中文字" class="">
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
</div>
</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>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
</div>
</el-form-item>
</card-container>
</el-form>