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

修改文本标题为标题

v1.0.0
于肖磊 2024-09-25 16:38:26 +08:00
parent cfc46458b7
commit 615c73fc08
9 changed files with 170 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/div-content/index.vue
View File

@ -95,9 +95,9 @@
<template v-else-if="item.key == 'rich-text'">
<model-rich-text :key="item.com_data" :value="item.com_data"></model-rich-text>
</template>
<!-- 文本标题 -->
<template v-else-if="item.key == 'text-title'">
<model-text-title :key="item.com_data" :value="item.com_data"></model-text-title>
<!-- 标题 -->
<template v-else-if="item.key == 'title'">
<model-title :key="item.com_data" :value="item.com_data"></model-title>
</template>
<!-- 悬浮按钮 -->
<template v-else-if="item.key == 'float-window'">

2
src/components/footer-nav/footer-nav-styles.vue
View File

@ -12,7 +12,7 @@
</card-container>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_styles_update" />
<common-styles :value="form.common_style" :is-floating-up="false" @update:value="common_styles_update" />
</div>
</template>
<script setup lang="ts">

72
src/components/model-text-title/index.vue
View File

@ -1,72 +0,0 @@
<template>
<div :style="style_container">
<div class="re flex" :class="title_center">
<div class="z-i pr-15" :style="title_style">{{ form.title || '标题' }}</div>
<div class="flex-row gap-10 align-c right-0 abs">
<template v-if="form.keyword_show == '1'">
<div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
{{ item.title }}
</div>
</template>
<div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer } from '@/utils';
import { cloneDeep } from 'lodash';
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
},
});
// 用于页面判断显示
const state = reactive({
form: props.value.content,
new_style: props.value.style,
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const keyword_list = computed(() => {
// 深拷贝一下，确保不会出现问题
const arry_list = cloneDeep(form.value.keyword_list);
return arry_list.filter((item: { is_show: string }) => item.is_show == '1');
});
// 标题的设置
const title_style = computed(() => {
let common_styles = '';
if (new_style.value.title_weight == 'italic') {
common_styles += `font-style: italic`;
} else if (new_style.value.title_weight == '500') {
common_styles += `font-weight: 500`;
}
return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; ${common_styles}`;
});
// 标题是否居中
const title_center = computed(() => {
return form.value.is_title_center == '1' ? 'jc-c' : '';
});
// 关键字设置
const keyword_style = computed(() => {
return `color:${new_style.value.keyword_color}; font-size: ${new_style.value.keyword_size}px;`;
});
// 右边按钮设置
const right_style = computed(() => {
return `color:${new_style.value.right_color}; font-size: ${new_style.value.right_size}px;`;
});
// 通用样式区
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>
<style lang="scss" scoped>
.right-0.abs {
top: 50%;
transform: translateY(-50%);
}
</style>

102
src/components/model-title/index.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<div :style="style_container">
<div class="flex-col gap-10">
<div class="re flex-row" :class="title_center">
<div class="z-i flex-row align-c gap-10">
<template v-if="!isEmpty(form.img_src)">
<image-empty v-model="form.img_src[0]" class="title-img"></image-empty>
</template>
<template v-else-if="!isEmpty(form.icon_class)">
<icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
</template>
<div class="pr-15 nowrap" :style="title_style">{{ form.title || '标题' }}</div>
</div>
<div class="flex-row gap-10 align-c right-0 abs">
<template v-if="form.keyword_show == '1'">
<div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
{{ item.title }}
</div>
</template>
<div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
</div>
</div>
<div v-if="!isEmpty(form.subtitle)" class="break" :style="subtitle_style">{{ form.subtitle }}</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer } from '@/utils';
import { cloneDeep, isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
},
});
// 用于页面判断显示
const state = reactive({
form: props.value.content,
new_style: props.value.style,
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const keyword_list = computed(() => {
// 深拷贝一下，确保不会出现问题
const arry_list = cloneDeep(form.value.keyword_list);
return arry_list.filter((item: { is_show: string }) => item.is_show == '1');
});
// 标题的设置
const title_style = computed(() => {
let common_styles = '';
if (new_style.value.title_weight == 'italic') {
common_styles += `font-style: italic`;
} else if (new_style.value.title_weight == '500') {
common_styles += `font-weight: 500`;
}
return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; ${common_styles}`;
});
// 标题的设置
const subtitle_style = computed(() => {
let common_styles = '';
if (new_style.value.subtitle_weight == 'italic') {
common_styles += `font-style: italic`;
} else if (new_style.value.subtitle_weight == '500') {
common_styles += `font-weight: 500`;
}
return `color:${new_style.value.subtitle_color}; font-size: ${new_style.value.subtitle_size}px; ${common_styles}`;
});
// 标题是否居中
const title_center = computed(() => {
return form.value.is_title_center == '1' ? 'jc-c' : '';
});
// 关键字设置
const keyword_style = computed(() => {
return `color:${new_style.value.keyword_color}; font-size: ${new_style.value.keyword_size}px;`;
});
// 右边按钮设置
const right_style = computed(() => {
return `color:${new_style.value.right_color}; font-size: ${new_style.value.right_size}px;`;
});
// 通用样式区
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>
<style lang="scss" scoped>
.right-0.abs {
top: 50%;
transform: translateY(-50%);
}
.break {
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
}
.title-img {
max-width: 6rem;
max-height: 3rem;
}
</style>

6
src/components/model-text-title/model-text-title-content.vue → src/components/model-title/model-title-content.vue
View File

@ -12,6 +12,12 @@
<el-form-item label="是否居中">
<el-switch v-model="form.is_title_center" active-value="1" inactive-value="0"/>
</el-form-item>
<el-form-item label="上传图片">
<upload v-model="form.img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
</el-form-item>
<el-form-item label="副标题">
<el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>

4
src/components/model-text-title/model-text-title-setting.vue → src/components/model-title/model-title-setting.vue
View File

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

38
src/components/model-text-title/model-text-title-styles.vue → src/components/model-title/model-title-styles.vue
View File

@ -3,6 +3,18 @@
<el-form :model="form" label-width="80">
<card-container>
<div class="mb-12">标题设置</div>
<template v-if="!isEmpty(content.icon_class)">
<el-form-item label="左侧图标">
<div class="flex-col w gap-10">
<el-form-item label="大小" label-width="40" class="form-item-child-label">
<slider v-model="form.icon_size" :max="100"></slider>
</el-form-item>
<el-form-item label="颜色" label-width="40" class="form-item-child-label">
<color-picker v-model="form.icon_color" default-color="#999"></color-picker>
</el-form-item>
</div>
</el-form-item>
</template>
<el-form-item label="标题颜色">
<color-picker v-model="form.title_color" default-color="#000000"></color-picker>
</el-form-item>
@ -17,6 +29,25 @@
</el-form-item>
</el-form-item>
</card-container>
<template v-if="!isEmpty(content.subtitle)">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">副标题设置</div>
<el-form-item label="颜色">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
</el-form-item>
<el-form-item label="文字">
<el-radio-group v-model="form.subtitle_weight">
<el-radio value="500">加粗</el-radio>
<el-radio value="normal">正常</el-radio>
<el-radio value="italic">倾斜</el-radio>
</el-radio-group>
<el-form-item label="字号" label-width="40" class="mb-0 w">
<slider v-model="form.subtitle_size" :max="100"></slider>
</el-form-item>
</el-form-item>
</card-container>
</template>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">关键字设置</div>
@ -43,15 +74,20 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from "lodash";
const props = defineProps({
value: {
type: Object,
default: () => {},
},
content: {
type: Object,
default: () => {},
}
});
const state = reactive({
form: props.value
form: props.value,
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);

16
src/views/layout/components/main/default/text-title.ts → src/views/layout/components/main/default/title.ts
View File

@ -11,6 +11,9 @@ interface defaultSearch {
content: {
title: string;
title_link: object;
img_src: uploadList[];
icon_class: string;
subtitle: string;
is_title_center: string;
keyword_show: string;
keyword_list: carousel_list[];
@ -22,6 +25,11 @@ interface defaultSearch {
title_color: string;
title_size: number;
title_weight: string;
icon_size: number;
icon_color: string;
subtitle_color: string;
subtitle_size: number;
subtitle_weight: string;
keyword_color: string;
keyword_size: number;
right_color: string;
@ -33,6 +41,9 @@ const defaultSearch: defaultSearch = {
content: {
title: '',
title_link: {},
img_src: [],
icon_class: '',
subtitle: '',
is_title_center: '0',
keyword_show: '1',
right_show: '1',
@ -51,6 +62,11 @@ const defaultSearch: defaultSearch = {
title_color: '#000',
title_size: 12,
title_weight: 'normal',
icon_size: 12,
icon_color: '#999',
subtitle_color: '#999',
subtitle_size: 12,
subtitle_weight: 'normal',
keyword_color: '#000',
keyword_size: 12,
right_color: '#999',

6
src/views/layout/components/main/index.ts
View File

@ -11,7 +11,7 @@ import defaultArticleList from './default/article-list';
import defaultArticleTabs from './default/article-tabs';
import defaultCarousel from './default/carousel';
import defaultNotice from './default/notice';
import defaultTextTitle from './default/text-title';
import defaultTitle from './default/title';
import defaultFloatWindow from './default/float-window';
import defaultTabs from './default/tabs';
import defaultGoodsList from './default/goods-list';
@ -39,7 +39,7 @@ interface DefaultSettings {
nav_group: object;
carousel: object;
notice: object;
text_title: object;
title: object;
float_window: object;
tabs: object;
goods_list: object;
@ -67,7 +67,7 @@ const defaultSettings: DefaultSettings = {
nav_group: defaultNavGroup,
carousel: defaultCarousel,
notice: defaultNotice,
text_title: defaultTextTitle,
title: defaultTitle,
float_window: defaultFloatWindow,
tabs: defaultTabs,
goods_list: defaultGoodsList,