关于vue.js:vue-连线-svg

<!-- 首页 -->
<template>
  <div class="index">
    <div class="img-box">
      <div @click="drawlines('img','50,0,1')"></div>
      <div @click="drawlines('img','250,0,2')"></div>
      <div @click="drawlines('img','450,0,3')"></div>
    </div>
    <svg>
      <line
        v-for="(val, key) in svgArr"
        :key="key"
        :x1="val.x"
        :y1="val.y"
        :x2="val.x1"
        :y2="val.y1"
        :style="{stroke: val.isTrue ? 'green' : 'rgb(255, 0, 0)',
          'stroke-width': 5,
          'stroke-dasharray': val.isTrue ? 0 : 8,
        }":class="{'err-line': val.isTrue ? false : true}"
      />
    </svg>
    <div class="english">
      <div @click="drawlines('eng','50,100,3')">red</div>
      <div @click="drawlines('eng','250,100,2')">blue</div>
      <div @click="drawlines('eng','450,100,1')">skyblue</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {Demo,},
  data() {
    return {
      textObj: {title: '',},
      isClick: false,
      svgArr: [],
      svgObj: {},
      isDrawlines: true,
    }
  },
  computed: {},
  watch: {},
  methods: {
    /**
     * 图案连线点击事件
     * 如果对象只有 img || english 属性时 阐明以后只有一个点 不进行 push 数组（联线）*/
    drawlines(type, xy) {
      /**
       * 如果有谬误 禁止再次画线
       */
      if (!this.isDrawlines) {return}
      if (!this.svgObj.type) {this.svgObj[type] = {x: xy.split(',')[0],
          y: xy.split(',')[1],
          z: xy.split(',')[2],
        }
      }
      /**
       * 只有对象长度时 2 的时候 push
       */
      if (Object.keys(this.svgObj).length == 2) {
        let obj = {
          x: this.svgObj.img.x,
          y: this.svgObj.img.y,
          x1: this.svgObj.eng.x,
          y1: this.svgObj.eng.y,
          isTrue: this.svgObj.img.z == this.svgObj.eng.z ? true : false,
        }
        /**
         * 去重操作
         */
        if (this.unique(obj)) {this.svgArr.push(obj)
          /**
           * 如果有谬误 1s 后主动删除
           */
          if (!obj.isTrue) {
            this.isDrawlines = false
            setTimeout(() => {this.svgArr.splice(this.svgArr.length - 1, 1)
              this.isDrawlines = true
            }, 3000)
          }
          this.svgObj = {}}
      }
    },
    unique(obj) {var str = JSON.stringify(obj)
      var num = 0
      this.svgArr.forEach((val) => {if (JSON.stringify(val) === str) {num = 1}
      })
      return num == 0 ? true : false
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped>
.img-box,
.english {
  margin: 0 auto;
  width: 500px;
  height: 100px;
  display: flex;
  justify-content: space-between;
}
.img-box div,
.english div {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #ffffff;
}
.img-box div:nth-child(1) {background-color: red;}
.img-box div:nth-child(2) {background-color: blue;}
.img-box div:nth-child(3) {background-color: skyblue;}
.english div:nth-child(1) {background-color: red;}
.english div:nth-child(2) {background-color: blue;}
.english div:nth-child(3) {background-color: skyblue;}
svg {
  width: 500px;
  height: 100px;
}

@keyframes blink {
  0% {opacity: 0;}
  35% {opacity: 0.35;}
  55% {opacity: 0.55;}
  75% {opacity: 0.75;}
  100% {opacity: 0;}
}
@-webkit-keyframes blink {
  0% {opacity: 0;}
  35% {opacity: 0.35;}
  55% {opacity: 0.55;}
  75% {opacity: 0.75;}
  100% {opacity: 0;}
}
svg .err-line {
  animation: blink 0.5s infinite ease-in;
  -webkit-animation: blink 0.5s infinite ease-in; /*Safari and Chrome*/
}
</style>