vue 自定义指令拖拽改变其dom宽度

萌萌小飒

于 2024-08-27 11:08:29 发布

阅读量289

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lanmuob/article/details/141597407

版权

1.自定义指令

定义指令 v-horizentalDrag

horizontalDrag.js

export default {
  bind(el, binding, vnode, oldVnode) {
    const minWidth = 300
    const maxWidth = 500
    let {
      value
    } = binding
    if (!value) {
      return console.error(`v-horizontalDrag不起作用：未传入class名称`)
    }

    el.style = 'position:relative;height:100%'
    const dragLine = document.createElement('div')

    dragLine.style = 'display: block;width: 4px;height: 100%;position: absolute;right: 0;z-index: 999;cursor: e-resize;border-right: 1px solid rgba(0, 78, 162, 0.3);top:0'
    el.appendChild(dragLine);

    dragLine.addEventListener('mousedown', (e) => {
      //dragLine 到可视区左侧距离
      const dragLineX = e.clientX - el.offsetLeft;
      //控制区域元素的宽度
      const revisadoWidth = el.offsetWidth;

      const brotherDom = document.getElementsByClassName(`${value}`)[0]

      document.onmousemove = (me) => {
        e.preventDefault();
        let distanceMove = me.clientX - dragLineX
        let resWidth = revisadoWidth + distanceMove
        if (resWidth > minWidth && resWidth < maxWidth) {
          el.style.width = `${resWidth}px`
          brotherDom.style.width = `calc(100% - ${(resWidth)}px)`
        }
      };
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
        //拖拽完后右侧表格需重新布局
        window.dispatchEvent(new Event('resize'))
      };
    })
  }
}

index.js

import horizontalDrag from './horizontalDrag'

const install = (Vue) => {
  Vue.directive('horizontalDrag', horizontalDrag)
}

if (window.Vue) {
  Vue.use(install); // eslint-disable-line
}

export default install

2.在main.js中注册

import Vue from 'vue';
import App from './App';
import store from './store';
import router from './router';
import Element from 'element-ui';
import horizontalDrag from './directive/horizontalDrag'; //横向拖拽-自定义指令
Vue.use(horizontalDrag)
new Vue({
	el: '#app',
	router,
	store,
	render: h => h(App)
});

3.在页面中使用

左右布局,其中一栏拖拽功能使用方法 v-horizontalDrag = "非控制栏的class名称"

 <el-row :gutter="16" class="main-content" style="height:100%;margin-left:0;margin-right:0;">
        <!--左侧-->
        <el-col :span="4" :xs="24" v-horizontalDrag="'tableContainer'" class="left-tree">
          <div class="container">
            .......
          </div>
        </el-col>
        <!--右侧-->
        <el-col :span="20" :xs="24" class="tableContainer" style="height: 100%;">
          <el-table>
	......
          </el-table>
        </el-col>
</el-row>