PC_FiveFollowing/src/components/SvgComponents.vue

<template>
  <component :is="svgtype" :svg_color="svg_color" ref="textsss"></component>
</template>
<script>
let importComponents = {};
export default {
  props: [
    "svgInfoData",
    "svg_color",
    "svgtype",
    "text",
    "size",
    "fontSize",
    "height",
    "strokeWidth",
  ],
  data() {
    return {
      componentTag: "",
    };
  },
  components: importComponents,
  watch: {
    text(text) {
      this.editText(text);
    },
    fontSize(fontSize) {
      this.font_Size(fontSize);
    },
    strokeWidth(width) {
      this.stroke_Width(width);
    },
    height(height) {
      this.edit_height(height);
    },
  },
  created() {
    this.svgInfoData.forEach((f) => {
      let componentInfo = {
        template: f.template,
        props: f.props,
      };
      if (f.type === this.svgtype) {
        importComponents[f.type] = componentInfo;
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.editText(this.text);
      this.font_Size(this.fontSize);
      this.stroke_Width(this.strokeWidth);
      this.edit_height(this.height);
    });
  },
  methods: {
    editText(val) {
      var el = this.$refs.textsss.$el;
      if (el != undefined) {
        // console.log(this.$refs.textsss);
        if (el.nodeName === "text") {
          el.innerHTML = val;
          this.font_Size(this.fontSize);
        }
      }
    },
    font_Size(val) {
      var el = this.$refs.textsss.$el;
      if (el != undefined) {
        if (el.nodeName === "text") {
          var len = el.innerHTML.length;
          el.setAttribute("x", -(val / 2) * len);
          el.setAttribute("y", val / 2);
          el.setAttribute("font-size", val);
        }
      }
    },
    edit_height(val) {
      var el = this.$refs.textsss.$el;
      if (el != undefined) {

        var dom = document.getElementById(el.parentNode.id);
        var title = dom.getAttribute("title");
        let line = dom.getElementsByTagName("line")[0];

        if (val != null && val != "" && val != undefined) {
          if (title === "电线") {
            line.setAttribute("y1", -val);
            line.setAttribute("y2", val);
          } else if (title === "横线") {
            line.setAttribute("x1", -val);
            line.setAttribute("x2", val);
          }
        }
      }
    },
    stroke_Width(val) {
      var el = this.$refs.textsss.$el;
      if (el != undefined) {
        var dom = document.getElementById(el.parentNode.id);
        var title = dom.getAttribute("title");
        let line = dom.getElementsByTagName("line")[0];

        if (val != null && val != "" && val != undefined) {
          if (title === "电线") {
            line.setAttribute("stroke-width", val);
          } else if (title === "横线") {
            line.setAttribute("stroke-width", val);
          }
        }
      }
    },
  },
};
</script>
<style scoped>
</style>