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

修改自定义背景为渐变类型的

v1.0.0
于肖磊 2024-10-08 09:45:43 +08:00
parent 91f4ad2c83
commit bf9a900ee0
5 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/custom-module/model-icon/index.vue
View File

@ -4,7 +4,7 @@
</div>
</template>
<script setup lang="ts">
import { radius_computer, padding_computer } from '@/utils';
import { radius_computer, padding_computer, gradient_handle } from '@/utils';
const props = defineProps({
value: {
type: Object,
@ -28,7 +28,7 @@ const props = defineProps({
const form = reactive(props.value);
const com_style = computed(() => {
let style = `${ set_count() } background-color: ${ form.com_bg }; ${ radius_computer(form.bg_radius) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding) };`;
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding) };`;
if (form.border_show == '1') {
style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
}

7
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -53,7 +53,7 @@
<slider v-model="form.com_height" :max="1000"></slider>
</el-form-item>
<el-form-item label="背景颜色">
<color-picker v-model="form.com_bg"></color-picker>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
@ -121,6 +121,11 @@ const icon_change = (key: string) => {
}
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
watch(
diy_data,
(val) => {

4
src/components/common/custom-module/model-text/index.vue
View File

@ -11,7 +11,7 @@
</div>
</template>
<script setup lang="ts">
import { radius_computer, padding_computer } from '@/utils';
import { radius_computer, padding_computer, gradient_handle } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -57,7 +57,7 @@ const text_style = computed(() => {
});
const com_style = computed(() => {
let style = `${ set_count() } background-color: ${ form.com_bg }; ${ radius_computer(form.bg_radius) }`;
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) }`;
if (form.border_show == '1') {
style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
}

7
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -73,7 +73,7 @@
<slider v-model="form.com_height" :max="1000"></slider>
</el-form-item>
<el-form-item label="背景颜色">
<color-picker v-model="form.com_bg"></color-picker>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
@ -141,6 +141,11 @@ const text_change = (key: string) => {
}
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
watch(
diy_data,
(val) => {

6
src/components/model-custom/components/index-default.ts
View File

@ -34,7 +34,8 @@ export const text_com_data = {
radius_bottom_right: 0,
},
border_size: 1,
com_bg: '',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
bottom_up: '1',
}
// 图片的默认值
@ -117,7 +118,8 @@ export const icon_com_data = {
radius_bottom_right: 0,
},
border_size: 1,
com_bg: '',
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
bottom_up: '1',
}
// 判断两个矩形是否有交集或者被包裹