vue使用vue-dragscroll实现鼠标或手指拖拽滚动效果

需求说明

如图所示，VUE下需要实现通过鼠标拖动来实现左右的滚动效果（而不是拉动左右的滚动条）

可以使用github开源的滚动插件：https://github.com/donmbelembe/vue-dragscroll, 文档地址：https://vue-dragscroll.donfalcon.com/

集成步骤

package.json引入依赖(查看以下代码，其他依赖和配置我都省略了)：

{
  "dependencies": {
    "vue-dragscroll": "^3.0.1"
  } 
}

vue代码引入：

import { dragscroll } from 'vue-dragscroll'

export default {
    directives: {
        dragscroll
    },
    data() {
    },
    created() {
    },
    methods: {
    }
}

HTML代码如下：

<div style="text-align: left;background: #FAFAFA;padding: 0 15px 20px 15px;" v-if="kejians.length>0">
  <div style="padding: 10px 0;font-weight: 600;">相关课件</div>
  <div class="h-scroll" v-dragscroll style="cursor: pointer;">
      <div v-for="kejian in kejians" style="text-align: center;background: white;margin-right: 15px;border-radius: 8px;">
          <img :src="baseUrl+'/api/media/media/'+kejian.mediaId+'.jpg'"
               style="width: 180px;height: 100px;display: block;margin:0 auto;border-top-left-radius: 8px;border-top-right-radius: 8px;"/>
          <div style="padding: 4px 10px;">{{ kejian.name }}</div>
      </div>
  </div>
</div>

相关的CSS:

.h-scroll {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

// 隐藏横向滚动条
.h-scroll::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

之前有文章专门介绍HTML、CSS实现横向滚动的，详见：https://blog.terrynow.com/2022/04/27/css-div-horizontal-scroll-and-hide-scroll-bar-implement/