widgetSvg.vue
3.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!--
svg 图层
-->
<template>
<div id="formStr" :class="['div_Style']"
:style="styleColor" v-html="showText">
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "WidgetSvg",
components: {
},
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
options: {},
svgData:[],
optionsData: {},
optionsSetUp: {},
};
},
computed: {
...mapState('dataSource', ['staticData']),
transStyle() {
return this.objToOne(this.options);
},
styleColor() {
const styleColor = {
position: this.ispreview ? "absolute" : "static",
width: this.transStyle.width + "px",
height: this.transStyle.height + "px",
left: this.transStyle.left + "px",
top: this.transStyle.top + "px",
right: this.transStyle.right + "px"
};
return styleColor;
},
showText() {
const {text, slectedDataType} = this.transStyle;
const key = this.staticData[slectedDataType] || text;
const dataSvg = this.value.setup.dynamicAddSvg;
for (let i = 0; i < dataSvg.length; i++) {
if(dataSvg[i].key==key){
/** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置 */
/** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
//设置svg 自适应 添加属性 viewBox="0,0,640,480"
let svg = dataSvg[i].value;
let svgViewbox = svg.substr(0,svg.indexOf("viewBox=\"")+9); //截取最后一个点号后4个字符
let svgViewboxAfter = svg.substr(svg.indexOf("viewBox=\"")+9,svg.length); //截取最后一个点号后4个字符
let svgViewboxBox = svgViewboxAfter.substr(0,svgViewboxAfter.indexOf("\"")); //截取最后一个点号后4个字符
let svgViewboxBoxAfter = svgViewboxAfter.substr(svgViewboxAfter.indexOf("\"")+1,svgViewboxAfter.length); //截取最后一个点号后4个字符
let viewbox = this.transStyle.left+" "+ this.transStyle.top+" "+ this.transStyle.width+" "+ this.transStyle.height;
let dataSvgAfter = svgViewbox+viewbox+"\"" +svgViewboxBoxAfter;
console.log("svg",svg);
console.log("svgViewbox",svgViewbox);
console.log("svgViewboxAfter",svgViewboxAfter);
console.log("svgViewboxBox",svgViewboxBox);
console.log("svgViewboxBoxAfter",svgViewboxBoxAfter);
console.log("viewbox",viewbox);
console.log("dataSvgAfter",dataSvgAfter);
return svg;
}
}
return "";
},
},
watch: {
value: {
handler(val) {
this.options = val;
this.optionsData = val.data;
this.optionsSetUp = val.setup;
this.initData();
},
deep: true,
},
},
mounted() {
this.options = this.value;
this.optionsData = this.value.data;
},
methods: {
initData() {
this.handlerSvgData();
},
handlerSvgData(){
const data = this.optionsSetUp.dynamicAddSvg;
this.svgData = data;
},
getSvgValue(key){
const data = this.optionsSetUp.dynamicAddSvg;
for (let i = 0; i < data.length; i++) {
if(data[i].key==key){
return data[i].value;
}
}
return "";
},
}
};
</script>
<style scoped lang="scss">
.div {
width: 100%;
height: 100%;
border: 2em;
border-color: aqua;
overflow: hidden;
}
.div_Style {
width: 100%;
height: 100%;
}
#svg {
width: 100%;
height: 100vh;
}
svg {
width: 100% !important;
height: 100vh !important;
}
</style>