nuxt vue 按住鼠标左右滑动方案收集

前言

• 最近在做PC端网页左右滑动，找到以下3种方案，做个记录。

vue-dragscroll

• 官方文档：https://vue-dragscroll.donfalcon.com/
• 安装（注意版本）

npm install vue-dragscroll
1

注意：Vue2使用的版本不一样，之前我用最新的就没成功。踩了坑。

• 新建插件vue-dragscroll.js

import Vue from 'vue'
import VueDragscroll from "vue-dragscroll";
Vue.use(VueDragscroll);
1
2
3

• nuxt.config.js中引入插件

 ...省略...
  {
      src: '@/plugins/vue-dragscroll',
      ssr: false,
    },
     ...省略...
1
2
3
4
5
6

如果不加到插件把ssr改为false会报self is not defined

• 在页面中使用

... 省略...
    

          
        
... 省略...

1
2
3
4
5
6
7
8
9
10
11
12
13

• 效果
  

vuescroll

• github： https://github.com/YvesCoding/vuescroll/

• 官方文档： https://vuescrolljs.yvescoding.me/guide/

• 增加组件Draggable.vue

<template>
  <div class="vuescroll_container">
    <vuescroll :ops="options" @handle-scroll="dragstart">
      <div class="child">
        <slot />
      </div>
    </vuescroll>
  </div>
</template>
  
  <style lang="css">
.vuescroll_container {
  width: 500px;
}
</style>
  <style lang="css" scoped>
.child {
  display: flex;
  outline: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: auto;
}
.child::-webkit-scrollbar {
  display: none;
}
</style>
  
  <script>
import vuescroll from "vuescroll";

export default {
  components: {
    vuescroll,
  },
  props: {
    setDraggable: {
      type: Function,
      default: () => {},
      required: false,
    },
  },
  data() {
    return {
      currPos: 0,
      options: {
        vuescroll: {
          mode: "slide",
          zooming: false,
          // NOTE
          // Comment property 'scroller' below to see the problem
          scroller: {
            bouncing: {
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            },
            speedMultiplier: 0.9,
          },
        },
        scrollPanel: {
          scrollingY: false,
        },
        bar: {
          disable: true,
        },
      },
    };
  },
  methods: {
    dragstart(vert, horiz, nativeEvent) {
      if (this.currPos === horiz.process) {
        this.$emit("setDraggable", false);
      } else {
        this.currPos = horiz.process;
        this.$emit("setDraggable", true);
      }
    },
  },
};
</script>
  
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

• 页面使用组件

<template>
  <Draggable @setDraggable="setDraggable">
    <div
      class="flex"
      :class="{active: item.active}"
      v-for="item in items"
      :key="item.title"
      @mouseup="select(item.title)"
    >{{item.title}}</div>
  </Draggable>
</template>

<style>
.flex {
  height: 200px;
  width: 250px;
  background: #ccc;
  border-radius: 20px;
  border: 1px solid #FA4E05;
  margin: 0 10px;
}

.active {
  color: blue;
  background: red;
}
</style>


<script>
import Draggable from "~/components/Draggable.vue";

export default {
  auth: false,
  components: {
    Draggable
  },
  data() {
    return {
      dragging: false,
      items: [
        { title: "a", active: false },
        { title: "b", active: false },
        { title: "c", active: false },
        { title: "d", active: false },
        { title: "f", active: false },
        { title: "g", active: false }
      ]
    };
  },
  methods: {
    select(title) {
      if (!this.dragging) {
        const item = this.items.find(i => i.title === title);
        item.active = !item.active;
      }
    },

    setDraggable(flag) {
      this.dragging = flag;
    }
  }
};
</script>

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

• 效果

自己写个指令

• 新建插件dragscroll.js

 import Vue from 'vue'

Vue.directive('dragscrollx', function (el) {
  el.onmousedown = function (ev) {
    const disX = ev.clientX
    const disY = ev.clientY
    const originalScrollLeft = el.scrollLeft
    const originalScrollTop = el.scrollTop
    const originalScrollBehavior = el.style['scroll-behavior']
    const originalPointerEvents = el.style['pointer-events']
    el.style['scroll-behavior'] = 'auto'
    // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
    document.onmousemove = function (ev) {
      ev.preventDefault()
      const distanceX = ev.clientX - disX
      const distanceY = ev.clientY - disY
      el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY)
      // 由于我们的图片本身有点击效果，所以需要在鼠标拖动的时候将点击事件屏蔽掉
      el.style['pointer-events'] = 'none'
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
      el.style['scroll-behavior'] = originalScrollBehavior
      el.style['pointer-events'] = originalPointerEvents
    }
  }
})
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

• nuxt.config.js中引入插件

...省略...
     {
      src: '@/plugins/dragscroll',
      ssr: false,
    },
 ...省略...
1
2
3
4
5
6

• 在页面中使用

... 省略...
     <div class="big-box"  v-dragscrollx>
          <div v-for="index in 50" :key="index">测试 {{index}}</div>
          <!-- <img src="http://127.0.0.1:5173/sandbox/assets/image.jpg" alt="" /> -->
        </div>
... 省略...
<style lang="scss" scoped>
.big-box {
  margin-top: 500px;
  width: 300px;
  height: 300px;
  overflow: scroll;
  display: flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 效果

参考

• https://github.com/donmbelembe/vue-dragscroll/issues/27
• https://vue-dragscroll.donfalcon.com/
• https://haofly.net/vue-dragscroll/
• https://codesandbox.io/s/github/phen0menon/vue-dragscroll-drag-issue?file=/package.json