1.0.4 • Published 4 years ago

drag-table-plugin v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

##drag-table-plugin


###一个适用于vue表格的横向拖拽插件 开发背景:现实需求中越来越多的表格内容充斥着有限的适口,这时表格的列过宽就会生成滚动条,想查看完整的表格就要横向拖拽滚动条,但如果表格内容过长则需要用户将表格滚到底部才能拖拽滚动条,非常不方便,所以这时可能需要一个可以直接用鼠标横向拖拽表格(容器)的插件。

####Features

  • 将支持纵向的拖拽实现全方位的滚动
  • 针对更多的UI组件库做快捷指令!
  • 兼容大部分现代浏览器

####Install drag-table-plugin npm install drag-table-plugin --save

import dragTable from 'drag-table-plugin'
Vue.use(dragTable)

####Usage

    <Table v-drag="dragEl" >
	</Table>
</template>
<script>
    export default {
        data () {
            return {
                dragEl: {
				container: '',
                	childBody: ''
				}
            }
        }
    }
</script>

####Mode Quick instructions: 现支持两个组件库的快捷指令

  • element-ui
  • view-design

exp:

<el-table 
  v-drag
...
>
  ...
</el-table>

当表格为element或iview的表格时v-drag后面不需要填写表达式

通用配置: v-drag接受一个表达式,该表达式类型为对象,对象内必须有一个container属性和一个childBody属性

属性名称说明备注
container视口容器dom,当此dom宽度小于包裹的内容宽度时产生滚动条,可通过ref获取必须属性
childBody内容dom,可通过ref获取必须属性

注意: container和childBody为挂载期结束后的dom,而不是vnode,建议通过ref的$el获取到

1.0.4

4 years ago

1.0.2

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago