vue3鼠標拖拽滑動效果實現(xiàn)demo

更新時間：2023年12月05日 11:08:48 作者：清兒

這篇文章主要為大家介紹了vue3鼠標拖拽滑動效果實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

vue3-dragscroll來實現(xiàn)

使用element-plus在頁面里寫一個表格，表格有橫向和豎向滾動條，想實現(xiàn)表格可以鼠標拖拽滾動。

可以用vue3-dragscroll來實現(xiàn)，首先需要在css里隱藏掉表格的滾動條，將表格的父級設置固定的寬高，并在父級標簽上增加v-dragscroll指令。

<template>
  <div class="data-table" v-dragscroll>
    <el-table
      :data="rowData"
      border
      :show-header="false"
      table-layout="auto"
      size="small"
    >
      <el-table-column
        :prop="item.prop"
        v-for="item of columns"
        :key="item.prop"
        :fixed="item.fixed ? true : false"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useDataTable } from './scripts/data-table'
const { columns, rowData } = useDataTable()
</script>
<style scoped lang="scss">
.data-table {
  width: 630px;
  height: 320px;
  overflow: auto;
  border: solid 1px #ebeef5;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    width: 6px;
    background: rgba(#101F1C, 0.1);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(144,147,153,.5);
    background-clip: padding-box;
    min-height: 6px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color .3s;
    cursor: pointer;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144,147,153,.3);
  }
}
:deep .el-table {
  width: fit-content;
  max-width: none;
  border: none;
}
:deep .el-scrollbar__bar.is-vertical {
  width: 0;
}
:deep .data-table thead {
  height: 0;
  display: block;
}
:deep .hide_line .el-table td.el-table__cell {
  border-bottom: none;
}
:deep .data-table .el-table--small .el-table__cell {
  padding: 0;
}
:deep .data-table .el-table--small .cell {
  padding: 4px 8px;
}
:deep .data-table .hover .cell {
  border-left: 1px solid blue;
  border-right: 1px solid blue;
}
</style>

全局安裝vue3-dragscroll

npm install vue3-dragscroll

在main.ts文件內引入

import { createApp } from 'vue'
import '@/style/index.css'
import App from './App.vue'
import router from './router'
import Vue3Dragscroll from 'vue3-dragscroll'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' 
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus, { locale: zhCn })
app.use(Vue3Dragscroll)
app.mount('#app')

以上就是vue3鼠標拖拽滑動效果實現(xiàn)demo的詳細內容，更多關于vue3鼠標拖拽滑動的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: