1<template>
2  <div class="sidebar">
3    <div class="slideContent" :style="{left: left + 'px', top: top + 'px'}">
4      <div class="move" @mousedown="move($event)">
5        <i class="el-icon-rank"/>
6      </div>
7      <div class="content">....</div>
8    </div>
9  </div>
10</template>
11
12<script>
13
14  export default {
15    name: "index",
16    data() {
17      return {
18        left: window.innerWidth - 445,
19        top: window.innerHeight - 640,
20      }
21    },
22    methods: {
23      move(e) {
24        const t = window.innerWidth - 375, a = window.innerHeight - 605
25        const i = document.getElementsByClassName("slideContent")[0]
26        const n = e.clientX - i.offsetLeft
27        const s = e.clientY - i.offsetTop;
28        return document.onmousemove = e => {
29          let r = e.clientX - n
30          let o = e.clientY - s
31          return r <= 0 ? r = 0 : r >= t && (r = t), o <= 20 ? o = 20 : o >= a && (o = a), i.style.left = r + "px", i.style.top = o + "px", !1
32        }, document.onmouseup = () => {
33          document.onmousemove = null, document.onmouseup = null
34        }, document.onmouseleave = () => {
35          document.onmousemove = null, document.onmouseup = null
36        }, !1
37      },
38    }
39  }
40</script>
41
42<style lang="scss" scoped>
43
44  .sidebar {
45    .slideContent {
46      position: fixed;
47      background: rgb(239, 238, 244);
48      width: 375px;
49      height: 600px;
50      right: 70px;
51      top: 0px;
52      z-index: 90;
53      color: #fff;
54      box-shadow: 0 5px 10px rgba(6, 6, 6, .3);
55
56      .move {
57        cursor: move;
58        user-select: none;
59        position: relative;
60        border-radius: 3px 3px 0 0;
61        height: 20px;
62        color: #333;
63        background: linear-gradient(0deg, #bbb, #eee);
64        width: 100%;
65        line-height: 10px;
66        display: block;
67        padding: 5px 10px;
68
69        i {
70          float: right;
71        }
72      }
73    }
74  }
75</style>
76