80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
|
<!-- eslint-disable vue/html-indent -->
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-button @click="changeRed">改成红色</el-button>
|
||
|
|
<el-button @click="changeGreen">改成绿色</el-button>
|
||
|
|
<mt-preview ref="svgPreviewRef" :export-json="export_json"></mt-preview>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { MtPreview } from '@/export'
|
||
|
|
import { ElButton } from 'element-plus'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
const svgPreviewRef = ref<InstanceType<typeof MtPreview>>()
|
||
|
|
const export_json = ref<any>({
|
||
|
|
canvasCfg: {
|
||
|
|
width: 1920,
|
||
|
|
height: 1080,
|
||
|
|
scale: 1,
|
||
|
|
color: '',
|
||
|
|
img: '',
|
||
|
|
guide: true,
|
||
|
|
adsorp: true,
|
||
|
|
adsorp_diff: 3,
|
||
|
|
transform_origin: {
|
||
|
|
x: 0,
|
||
|
|
y: 0
|
||
|
|
},
|
||
|
|
drag_offset: {
|
||
|
|
x: 0,
|
||
|
|
y: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
gridCfg: {
|
||
|
|
enabled: true,
|
||
|
|
align: true,
|
||
|
|
size: 10
|
||
|
|
},
|
||
|
|
json: [
|
||
|
|
{
|
||
|
|
id: 'demo-4Y2Eq7UPBm',
|
||
|
|
title: '演示svg文件',
|
||
|
|
type: 'svg',
|
||
|
|
binfo: {
|
||
|
|
left: 510,
|
||
|
|
top: 200,
|
||
|
|
width: 50,
|
||
|
|
height: 50,
|
||
|
|
angle: 0
|
||
|
|
},
|
||
|
|
resize: true,
|
||
|
|
rotate: true,
|
||
|
|
lock: false,
|
||
|
|
active: false,
|
||
|
|
hide: false,
|
||
|
|
props: {
|
||
|
|
fill: '#FF0000'
|
||
|
|
},
|
||
|
|
tag: 'demo',
|
||
|
|
common_animations: {
|
||
|
|
val: '',
|
||
|
|
delay: 'delay-0s',
|
||
|
|
speed: 'slow',
|
||
|
|
repeat: 'infinite'
|
||
|
|
},
|
||
|
|
events: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
const changeRed = () => {
|
||
|
|
svgPreviewRef.value?.setItemAttrByID('demo-4Y2Eq7UPBm', 'props.fill.val', '#FF0000').then(res => {
|
||
|
|
console.log(res)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const changeGreen = () => {
|
||
|
|
svgPreviewRef.value?.setItemAttrByID('demo-4Y2Eq7UPBm', 'props.fill.val', '#00FF00').then(res => {
|
||
|
|
console.log(res)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|