vue3鼠标拖拽滑动效果实现demo
作者：清儿
这篇文章主要为大家介绍了vue3鼠标拖拽滑动效果实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
vue3-dragscroll来实现
使用element-plus在页面里写一个表格，表格有横向和竖向滚动条，想实现表格可以鼠标拖拽滚动。
可以用vue3-dragscroll来实现，首先需要在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鼠标拖拽滑动效果实现demo的详细内容，更多关于vue3鼠标拖拽滑动的资料请关注脚本之家其它相关文章！