// 拖拽importdialogDragfrom'./control-web/js/dialogDrag.js'createApp(App).use(dialogDrag)// 对话框的拖拽 使用方式 本来想直接放在 el-dialog 里面,但是却没有效果,所以只好在外面套上一个 div。 <divv-dialogdrag><el-dialogtitle="收货地址"v-model="dialogFormVisible":modal="false">略...</el...
mounted(el) { el.focus() } } } 1. 2. 3. 4. 5. 6. 7. 8. 在开发测试的阶段可以用这种方式,便于调试。插件每次修改的时候都会重新加载,而局部注册的只需要局部更新即可。 我们可以定义一个 dialogdrag,然后在 mounted 里面实现拖拽的功能。 分析element-plus 的 Dialog 对话框 想要实现拖拽功能,首先...
Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); //dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.cssText += ';cursor:move;' dragDom.styl...
<template> <!-- 编辑组织 --> <div class="self-el-dialogs" v-dialogdrag> <dialog-form v-model="selfshow" :rules="rules" :form.sync="form" :detail="detail" :request="organization" :title="title" @close="close" @success="success" labelWidth="55px" size="custom" customClass="org-...
本来想直接放在 el-dialog 里面,但是却没有效果,所以只好在外面套上一个 div。 代码语言:javascript 复制 <div v-dialogdrag><el-dialog title="收货地址"v-model="dialogFormVisible":modal="false">略...</el-dialog></div> 注意,要加上 v- ,即 v-dialogdrag。
<el-dialog v-bind="$attrs" :title="props.type === '2' ? '分期结算' : '上传售后明细'" custom-class="dialog-s select-brand" destroy-on-close :close-on-click-modal="false" @open="handleOpen" @closed="handleClose" > <div>
3.2 dialogDrag.ts (核心代码) 说明:必须使用 nextTick 不然获取DOM元素会为空 import { nextTick } from "vue"; export default { mounted(el: any, binding?: any) { nextTick(() => { // 获取对应DOM const dialogHeaderEl = el.querySelector('.xz-modal-header') ...
directives:{focus:{// 指令的定义mounted(el){el.focus()}}} 在开发测试的阶段可以用这种方式,便于调试。插件每次修改的时候都会重新加载,而局部注册的只需要局部更新即可。 我们可以定义一个 dialogdrag,然后在 mounted 里面实现拖拽的功能。 分析element-plus 的 Dialog 对话框 ...
<el-button @click="onClick">弹框</el-button> <DragDialog v-model:dragDialog="dialogDrag" :dragArr="myArray" @submitDrag="submitDrag" @checkoutChange="checkoutChange" @onDragStart="onDragStart" @onDragEnd="onDragEnd" ></DragDialog> ...
使用方式 本来想直接放在 el-dialog 里面,但是却没有效果,所以只好在外面套上一个 div。 <div v-dialogdrag><el-dialogtitle="收货地址"v-model="dialogFormVisible":modal="false">略...</el-dialog></div>复制代码