基于ant-design的a-modal自定义vue拖拽指令

官网自定义指令链接
写一个dragDialog.js
在main.js中引入
import ‘./core/directives/dragDialog.js’

// 让 dialog 支持鼠标拖动
import Vue from 'vue'

Vue.directive('DragDialog', {
  update: function (el, binding, vnode) {
    if (!binding.value || !binding.value.reset) return
    const dialog = el.querySelector('.ant-modal')
    if (el.hasAttribute('margin-top') && el.style.display && el.style.display === 'none') {
      dialog.style.margin = null
      dialog.style.marginTop = el.getAttribute('margin-top')
      dialog.style.left = null
      dialog.style.top = null
    }
  },
  inserted: function (el, binding, vnode) {
    const header = el.querySelector('.ant-modal-header')
    const dialog = el.querySelector('.ant-modal')
    const body = document.body
    let status = 0
    let offsetLeft
    let offsetTop
    if (header) {
      el.setAttribute('margin-top', dialog.style.marginTop)
      header.classList.add('v-drag-header')
      header.onmousedown = e => {
        if (e.target.className.indexOf('v-drag-header') !== -1 || e.target.parentElement.className.indexOf('v-drag-header') !== -1) {
          status = 1
          offsetLeft = e.pageX - dialog.offsetLeft
          offsetTop = e.pageY - dialog.offsetTop
          dialog.classList.add('v-drag-dialog')
          if (!dialog.style.left) {
            dialog.style.margin = 'initial'
            dialog.style.top = (e.pageY - offsetTop) + 'px'
            dialog.style.left = (global.innerWidth - dialog.offsetWidth) / 2 + 'px'
          }
        }
      }

      header.onmousemove = e => {
        if (status) {
          let left = (e.pageX - offsetLeft)
          let top = (e.pageY - offsetTop)
          if (binding.value && binding.value.range && binding.value.range === 'body') {
            if (top + dialog.offsetHeight > global.innerHeight) top = global.innerHeight - dialog.offsetHeight
            if (left + dialog.offsetWidth > global.innerWidth) left = global.innerWidth - dialog.offsetWidth
            if (top < 0) top = 0
            if (left < 0) left = 0
          }
          dialog.style.top = top + 'px'
          dialog.style.left = left + 'px'
        }
      }

      body.onmouseup = e => {
        if (status) {
          status = 0
          dialog.classList.remove('v-drag-dialog')
        }
      }
    }
  }
})

注意 如果自定义modal销毁了内部 指令可能不可使用

### 关于 Ant Design Modal 组件的使用 #### 安装与基础配置 为了能够使用 `Ant Design` 的组件库,在项目中首先需要安装对应的包。对于 Vue 项目而言,可以通过如下命令来完成 `ant-design-vue` 的安装[^1]: ```bash npm install ant-design-vue ``` 接着按照官方文档指引进行必要的框架配置。 #### 基本用法示例 下面是一个简单的例子展示如何创建并显示一个基本对话框: ```html <template> <a-button type="primary" @click="showModal">Open Modal</a-button> <!-- Basic Modal --> <a-modal v-model:visible="visible" title="Basic Modal"> <p>Some contents...</p> </a-modal> </template> <script> export default { data() { return { visible: false, }; }, methods: { showModal() { this.visible = true; } } }; </script> ``` 这段代码展示了通过点击按钮触发模态窗口打开的效果,并设置了模态窗口内的简单文本内容[^4]。 #### 自定义功能增强 除了标准的功能外,还可以对 `Modal` 进行扩展定制化开发,比如实现拖拽效果或是支持全屏操作等功能。这通常涉及到监听特定事件并对这些行为做出响应处理。例如,可以利用第三方插件或自行编写逻辑来满足需求。 #### API 参考 以下是部分常用的属性列表(更多详情参见官方API文档): | 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | visible | boolean | - | 控制modal显隐状态| | title | string \| slot | '' | 对话框标题 | | okText | string | 'Ok' | 确认按钮文字 | | cancelText | string | 'Cancel'|取消按钮文字| 此外还有许多其他选项可用于进一步调整样式和交互方式,具体可见官方提供的完整版面说明文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值