DoKit/Web/packages/web/src/plugins/widget-border/ToolWidgetBorder.vue at 1dffd4741be68a9d25206907180be19f124e0ac9 · didi/DoKit · GitHub

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
<template>
<div>
  <div class="mask" v-show="!showContainer"></div>
  <div v-for="rect in rect_info" v-bind:key="rect.id" :style="{position: 'fixed', left: rect.left+'px', top: rect.top+'px', width: rect.width+'px', height: rect.height+'px', border: '1px dashed #707d8b', zIndex: 4 }"></div>
  <div class="button-group">
    <div class="refresh" @click="refresh">刷新边框</div>
    <div class="cancel" @click="remove">取消边框</div>
  </div>
</div>
</template>
<script>
import { removeIndependPlugin } from "@dokit/web-core";
export default {
  data() {
    return {
      rect_info: [],
      scrollX: window.scrollX,
      scrollY: window.scrollY,
    }
  },

  computed: {
    state() {
      return this.$store.state;
    },
    showContainer() {
      return this.state.showContainer;
    },
    // displayRect(rect) {
    //   return {
    //     'position': 'fixed',
    //     'left': rect.left + 'px',
    //     'top': rect.top + 'px',
    //     'width': rect.width + 'px',
    //     'height': rect.height + 'px',
    //     'border': '1px dotted red'
    //   }
    // }
  },

  mounted() {
    this.getAllRect();
    window.addEventListener("scroll", this.handleScroll)
  },

  beforeUnmount() {
    window.removeEventListener("scroll", this.handleScroll)
  },

  methods: {

    getAllRect() {
      let elems = document.body.getElementsByTagName("*");
      // console.log(window.scrollX, window.scrollY);
      [].slice.call(elems).forEach((ele,idx) => {
        let rect = ele.getBoundingClientRect();
        // console.log(rect.top, window.scrollY);
        this.rect_info.push({id: idx, left: rect.left, top: rect.top, width: rect.width, height: rect.height});
      });
      // console.log(this.rect_info);
    },

    handleScroll() {
      this.rect_info.forEach(rect => {
        rect.left += (this.scrollX - window.scrollX);
        rect.top += (this.scrollY - window.scrollY);
        });
      this.scrollX = window.scrollX;
      this.scrollY = window.scrollY;
    },

    remove() {
      removeIndependPlugin("widget-border");
    },

    refresh() {
      this.getAllRect();
    }
  }
}
</script>
<style>
.button-group {
  display: flex;
  justify-content: space-around;
  width: 100%;
  position: fixed;
  bottom: 10%;
  z-index: 4;
}
.refresh, .cancel {
  width: 30%;
  height: 40px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: antiquewhite;
  text-align: center;
  line-height: 40px;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background-color: #333333;
  opacity: 0.2;
}
</style>