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

更多按钮新增样式设置

v1.4.0
于肖磊 2025-08-07 18:50:47 +08:00
parent 3dccdc4245
commit 58dea3d536
5 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/model-tabs-magic/model-tabs-magic-styles.vue
View File

@ -91,6 +91,24 @@
<el-form-item label="图标大小">
<slider v-model="form.more_icon_size" :max="100"></slider>
</el-form-item>
<el-form-item label="按钮文字">
<div class="flex-col gap-10 w h">
<div class="flex-row gap-20">
<span class="size-12 cr-9">未选样式</span>
<color-picker v-model="form.more_button_text_selected_color" default-color="#666"></color-picker>
</div>
<div class="flex-row gap-20">
<span class="size-12 cr-9">选中样式</span>
<color-picker v-model="form.more_button_text_color" default-color="#666"></color-picker>
</div>
<div class="flex-row gap-20">
<span class="size-12 cr-9">选中背景</span>
<div class="flex-1">
<mult-color-picker :value="form.more_button_color_list" :type="form.more_button_direction" @update:value="more_button_color_picker_event"></mult-color-picker>
</div>
</div>
</div>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -144,5 +162,10 @@ const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.tabs_bg_color_list = arry;
form.value.tabs_bg_direction = type.toString();
};
// 更多选中按钮样式
const more_button_color_picker_event = (arry: color_list[], type: number) => {
form.value.more_button_color_list = arry;
form.value.more_button_direction = type.toString();
};
</script>
<style lang="scss" scoped></style>

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

@ -93,6 +93,24 @@
<el-form-item label="图标大小">
<slider v-model="form.more_icon_size" :max="100"></slider>
</el-form-item>
<el-form-item label="按钮文字">
<div class="flex-col gap-10 w h">
<div class="flex-row gap-20">
<span class="size-12 cr-9">未选样式</span>
<color-picker v-model="form.more_button_text_selected_color" default-color="#666"></color-picker>
</div>
<div class="flex-row gap-20">
<span class="size-12 cr-9">选中样式</span>
<color-picker v-model="form.more_button_text_color" default-color="#666"></color-picker>
</div>
<div class="flex-row gap-20">
<span class="size-12 cr-9">选中背景</span>
<div class="flex-1">
<mult-color-picker :value="form.more_button_color_list" :type="form.more_button_direction" @update:value="more_button_color_picker_event"></mult-color-picker>
</div>
</div>
</div>
</el-form-item>
</card-container>
</el-form>
<template v-if="isCommonStyle">
@ -145,5 +163,10 @@ const tabs_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.tabs_bg_color_list = arry;
form.value.tabs_bg_direction = type.toString();
};
// 更多选中按钮样式
const more_button_color_picker_event = (arry: color_list[], type: number) => {
form.value.more_button_color_list = arry;
form.value.more_button_direction = type.toString();
};
</script>
<style lang="scss" scoped></style>

9
src/config/const/tabs-carousel.ts
View File

@ -93,6 +93,10 @@ interface defaultTabs {
more_icon_class: string;
more_icon_color: string;
more_icon_size: number;
more_button_text_color: string;
more_button_text_selected_color: string;
more_button_direction: string;
more_button_color_list: color_list[];
data_spacing: number;
radius: number;
radius_top_left: number;
@ -332,6 +336,11 @@ const defaultTabs: defaultTabs = {
more_icon_class: 'category-more',
more_icon_color: '#000',
more_icon_size: 14,
// 更多弹出框的样式
more_button_text_color: '#666',
more_button_text_selected_color: '#666',
more_button_direction: '90deg',
more_button_color_list: [{ color: '#eee', color_percentage: undefined }],
// 选项卡与轮播之间的间距
data_spacing: 0,
// 图片圆角

9
src/config/const/tabs-magic.ts
View File

@ -93,6 +93,10 @@ interface defaultTabs {
more_icon_class: string;
more_icon_color: string;
more_icon_size: number;
more_button_text_color: string;
more_button_text_selected_color: string;
more_button_direction: string;
more_button_color_list: color_list[];
data_spacing: number;
common_style: object;
};
@ -440,6 +444,11 @@ const defaultTabs: defaultTabs = {
more_icon_class: 'category-more',
more_icon_color: '#000',
more_icon_size: 14,
// 更多弹出框的样式
more_button_text_color: '#666',
more_button_text_selected_color: '#666',
more_button_direction: '90deg',
more_button_color_list: [{ color: '#eee', color_percentage: undefined }],
// 选项卡与轮播之间的间距
data_spacing: 0,
// 公共样式

9
src/config/const/tabs.ts
View File

@ -55,6 +55,10 @@ interface defaultTabs {
more_icon_class: string;
more_icon_color: string;
more_icon_size: number;
more_button_text_color: string;
more_button_text_selected_color: string;
more_button_direction: string;
more_button_color_list: color_list[];
common_style: object;
};
}
@ -126,6 +130,11 @@ const defaultTabs: defaultTabs = {
more_icon_class: 'category-more',
more_icon_color: '#000',
more_icon_size: 14,
// 更多弹出框的样式
more_button_text_color: '#666',
more_button_text_selected_color: '#666',
more_button_direction: '90deg',
more_button_color_list: [{ color: '#eee', color_percentage: undefined }],
common_style: {
...defaultCommon,
color_list: [{ color: '#fff', color_percentage: undefined }],