文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3使用自定义指令实现eldialog拖拽功能示例详解

2024-04-02 19:55

关注

实现el-dialog的拖拽功能

这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽。

自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽。

如果自带的拖拽功能可以满足需求的话,可以跳过本文。

通过自定义指令实现拖拽功能

因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原生组件的影响更小。

我们先定义一个自定义指令 _dialogDrag:

import dialogDrag from './_dialog-drag'
import { watch } from 'vue'
const _dialogDrag = {
  // mounted 
  mounted (el: any, binding: any) {
    // 监听 dialog 是否显示的状态
    watch (binding.value, () => {
      // dialog 不可见,退出
      if (!binding.value.visible) return
      // 寻找 el-dialog 组件
      const container = el.firstElementChild.firstElementChild
      // 已经设置拖拽事件,退出
      if (container.onmousemove) return
      // 等待 DOM 渲染完毕
      setTimeout(() => {
        // 拖拽的 “句柄”
        const _dialogTitle = el.getElementsByClassName('el-dialog__header')
        if (_dialogTitle.length === 0) {
          // 还没有渲染完毕,或则其他原因
          console.warn('没有找到要拖拽的 el-dialog', el)
        } else {
          const { setDialog } = dialogDrag()
          const dialogTitle = _dialogTitle[0]
          // 弹窗
          const dialog = el.firstElementChild.firstElementChild.firstElementChild
          // 通过 css 寻找 el-dialog 设置的宽度
          const arr = dialog.style.cssText.split(';')
          const width = arr[0].replace('%', '').replace('--el-dialog-width:', '') //
          // 设置 el-dialog 组件、弹窗、句柄、宽度
          setDialog(container, dialog, dialogTitle, width)
        }
      },300)
    })
  },
}

const install = (app: any, options: any) => {
  app.directive('dialogDrag', _dialogDrag)
}
export {
  _dialogDrag,
  install
}

这里有两个比较烦人的地方:

实现拖拽功能

定义指令和实现拖拽,我分成了两个文件,我想,尽量解耦一下。

定义一个拖拽函数(dialogDrag):


export default function dialogDrag () {
  
  const setDialog = (container: any, dialog: any, dialogTitle: any, width: number) => {
    const oldCursor = dialogTitle.style.cursor
    // 可视窗口的宽度
    const clientWidth = document.documentElement.clientWidth
    // 可视窗口的高度
    const clientHeight = document.documentElement.clientHeight
    // 根据百分数计算宽度
    const tmpWidth = clientWidth * (100 - width) / 200
    // 默认宽度和高度
    const domset = {
      x: tmpWidth,
      y: clientHeight * 15 / 100 // 根据 15vh 计算
    }
    // 查看dialog 当前的宽度和高低
    if (dialog.style.marginLeft === '') {
      dialog.style.marginLeft = domset.x + 'px'
    } else {
      domset.x = dialog.style.marginLeft.replace('px','') * 1
    }
    if (dialog.style.marginTop === '') {
      dialog.style.marginTop = domset.y + 'px'
    } else {
      domset.y = dialog.style.marginTop.replace('px','') * 1
    }
    // 记录拖拽开始的光标坐标,0 表示没有拖拽
    const start = { x: 0, y: 0 }
    // 移动中记录偏移量
    const move = { x: 0, y: 0 }
    // 经过时改变鼠标指针形状
    dialogTitle.onmouseover = () => {
      dialogTitle.style.cursor = 'move' // 改变光标形状
    }
    // 鼠标按下,开始拖拽
    dialogTitle.onmousedown = (e: any) => {
      start.x = e.clientX
      start.y = e.clientY
      dialogTitle.style.cursor = 'move' // 改变光标形状
    }
    // 鼠标移动,实时跟踪 dialog
    container.onmousemove = (e: any) => {
      if (start.x === 0) { // 不是拖拽状态
        return
      }
      move.x = e.clientX - start.x
      move.y = e.clientY - start.y
      // 初始位置 + 拖拽距离
      dialog.style.marginLeft = (domset.x + move.x) + 'px'
      dialog.style.marginTop = (domset.y + move.y) + 'px'
    }
    // 鼠标抬起,结束拖拽
    container.onmouseup = (e: any) => {
      if (start.x === 0) { // 不是拖拽状态
        return
      }
      move.x = e.clientX - start.x
      move.y = e.clientY - start.y
      // 记录新坐标,作为下次拖拽的初始位置
      domset.x += move.x
      domset.y += move.y
      dialogTitle.style.cursor = oldCursor
      dialog.style.marginLeft = domset.x + 'px'
      dialog.style.marginTop = domset.y + 'px'
      // 结束拖拽
      start.x = 0
    }
  }
  return {
    setDialog // 设置
  }
}

首先观察el-dialog渲染后的DOM结构,发现是通过 marginLeft、marginTop 这两个css 的属性,那么我们的拖拽也可以通过修改这两个属性来实现。

然后就是古老的拖拽思路:按下鼠标的时候,记录光标的初始坐标,抬起鼠标的时候,记录光标的结束坐标,然后计算一下得到x、y的“偏移量”,进而修改 marginLeft、marginTop 这两个属性,即可实现拖拽的效果。

核心思路就是这样,剩下的就是细节完善了。

还有一个小问题,拖拽后关闭,然后再次打开,希望可以在拖拽结束的地方打开,而不是默认的位置。所以又想了个办法记录这个位置。

还是要观察 el-dialog 的行为,最后发现规律,一开始 marginLeft 是空的,而拖拽后会保留位置。所以,判断一下就好。

使用方式

原本想直接给el-dialog 设置自定义指令,但是发现“无效”,所以只好在外面套个div。

<template>
  <!--拖拽-->
  <el-button @click="dialog.visible = true">打开</el-button>
  <div v-dialog-drag="dialog" >
    <el-dialog
      v-model="dialog.visible"
      title="自定义拖拽2"
      width="25%"
    >
      <span>拖拽测试</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog.visible = false">Cancel</el-button>
          <el-button type="primary" @click="dialog.visible = false">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue'
  import { _dialogDrag } from '../../../lib/main'
  export default defineComponent({
    name: 'nf-dialog-move',
    directives: {
      dialogDrag: _dialogDrag
    },
    props: {
    },
    setup(props, context) {
      const dialog = reactive({
        visible: false
      })
      return {
        meta,
        dialog
      }
    }
  })
</script>

如果全局注册了自定义指令,那么组件里面就不用注册了。

dialog 的 visible: visible 这个属性的名称被写死了,不能用其他名称。这是一个偷懒的设定。

源码

gitee.com/naturefw-co…

在线演示

naturefw-code.gitee.io/nf-rollup-u…

以上就是vue3使用自定义指令实现el dialog拖拽功能示例详解的详细内容,更多关于vue3指令el dialog拖拽的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯