提交代码

src/views/demo/set-node-attr.vue

@@ -0,0 +1,79 @@
+<!-- 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>