111
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
:is-input="false"
|
:is-input="false"
|
||||||
v-model="brushSize"
|
v-model="brushSize"
|
||||||
:tip-formatter="(v) => v + 'px'"
|
:tip-formatter="(v) => v + 'px'"
|
||||||
:min="5"
|
:min="1"
|
||||||
:max="100"
|
:max="100"
|
||||||
@input="onInputSize"
|
@input="onInputSize"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="basic-info">
|
||||||
|
<div>
|
||||||
|
<span class="label">X:</span>
|
||||||
|
<span class="value">{{ object.left }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="label">Y:</span>
|
||||||
|
<span class="value">{{ object.top }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="label">Width:</span>
|
||||||
|
<span class="value">{{ object.width }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="label">Height:</span>
|
||||||
|
<span class="value">{{ object.height }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="label">缩放X:</span>
|
||||||
|
<span class="value">{{ object.scaleX }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="label">缩放Y:</span>
|
||||||
|
<span class="value">{{ object.scaleY }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="label">Angle:</span>
|
||||||
|
<span class="value">{{ object.angle }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, inject, computed, watch, onMounted } from 'vue'
|
||||||
|
const props = defineProps({
|
||||||
|
object: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onMounted(() => {})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.basic-info {
|
||||||
|
> div {
|
||||||
|
padding: 0.8rem 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> .label {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
min-width: 7rem;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
}
|
||||||
|
> .value {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -8,34 +8,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content" v-if="activeObject" v-show="show">
|
<div class="content" v-if="activeObject" v-show="show">
|
||||||
<div>
|
<basic-info :object="activeObject" />
|
||||||
<span class="label">X:</span>
|
|
||||||
<span class="value">{{ activeObject.left }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Y:</span>
|
|
||||||
<span class="value">{{ activeObject.top }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Width:</span>
|
|
||||||
<span class="value">{{ activeObject.width }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Height:</span>
|
|
||||||
<span class="value">{{ activeObject.height }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">缩放X:</span>
|
|
||||||
<span class="value">{{ activeObject.scaleX }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">缩放Y:</span>
|
|
||||||
<span class="value">{{ activeObject.scaleY }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="label">Angle:</span>
|
|
||||||
<span class="value">{{ activeObject.angle }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -51,8 +24,7 @@
|
|||||||
const activeObject = ref(null)
|
const activeObject = ref(null)
|
||||||
const updateActiveObject = () => {
|
const updateActiveObject = () => {
|
||||||
const obj = layers.value.find((v: any) => v.info.id === activeID.value)
|
const obj = layers.value.find((v: any) => v.info.id === activeID.value)
|
||||||
// activeObject.value = obj?.toJSON('info') || null
|
activeObject.value = obj ? JSON.parse(JSON.stringify(obj)) : null
|
||||||
activeObject.value = obj
|
|
||||||
}
|
}
|
||||||
watch(layers, () => updateActiveObject())
|
watch(layers, () => updateActiveObject())
|
||||||
watch(activeID, () => updateActiveObject())
|
watch(activeID, () => updateActiveObject())
|
||||||
@@ -95,23 +67,7 @@
|
|||||||
}
|
}
|
||||||
> .content {
|
> .content {
|
||||||
padding: 1.6rem;
|
padding: 1.6rem;
|
||||||
> div {
|
|
||||||
padding: 0.8rem 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
> .label {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #000;
|
|
||||||
font-weight: bold;
|
|
||||||
min-width: 7rem;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: 0.8rem;
|
|
||||||
}
|
|
||||||
> .value {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user