|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div
|
|
<div
|
|
|
- class="go-edit-range"
|
|
|
|
|
|
|
+ class="go-edit-range go-transition"
|
|
|
:style="rangeStyle"
|
|
:style="rangeStyle"
|
|
|
@mousedown="mousedownHandleUnStop($event, undefined)"
|
|
@mousedown="mousedownHandleUnStop($event, undefined)"
|
|
|
>
|
|
>
|
|
@@ -31,15 +31,24 @@ const size = computed(() => {
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const rangeStyle = computed(() => {
|
|
const rangeStyle = computed(() => {
|
|
|
|
|
+ // 缩放
|
|
|
|
|
+ const scale = {
|
|
|
|
|
+ transform: `scale(${getEditCanvas.value.scale})`
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log(scale)
|
|
|
|
|
+ // 设置背景色和图片背景
|
|
|
const background = getEditCanvasConfig.value.background
|
|
const background = getEditCanvasConfig.value.background
|
|
|
const backgroundImage = getEditCanvasConfig.value.backgroundImage
|
|
const backgroundImage = getEditCanvasConfig.value.backgroundImage
|
|
|
const selectColor = getEditCanvasConfig.value.selectColor
|
|
const selectColor = getEditCanvasConfig.value.selectColor
|
|
|
const backgroundColor = background ? background : undefined
|
|
const backgroundColor = background ? background : undefined
|
|
|
|
|
+
|
|
|
const computedBackground = selectColor
|
|
const computedBackground = selectColor
|
|
|
? { background: backgroundColor }
|
|
? { background: backgroundColor }
|
|
|
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
|
|
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
|
- return { ...useSizeStyle(size.value), ...computedBackground }
|
|
|
|
|
|
|
+ return { ...useSizeStyle(size.value), ...computedBackground, ...scale }
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 模态层
|
|
// 模态层
|
|
@@ -55,6 +64,7 @@ const rangeModelStyle = computed(() => {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
border: 1px solid;
|
|
border: 1px solid;
|
|
|
border-radius: 15px;
|
|
border-radius: 15px;
|
|
|
|
|
+ transform-origin: left top;
|
|
|
@include fetch-theme('box-shadow');
|
|
@include fetch-theme('box-shadow');
|
|
|
@include filter-border-color('hover-border-color');
|
|
@include filter-border-color('hover-border-color');
|
|
|
@include fetch-theme-custom('border-color', 'background-color4');
|
|
@include fetch-theme-custom('border-color', 'background-color4');
|