Element组件的Dialog弹框关闭的四种方式

最新推荐文章于 2024-03-29 15:35:24 发布
最新推荐文章于 2024-03-29 15:35:24 发布
阅读量1.5w 收藏 18
点赞数 9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44613011/article/details/119671149
版权

  1. 在遮罩空白处点击。可以通过:close-on-click-modal='false'来关闭这个功能

  2. 按下esc键。可以通过:close-on-press-escape='false'来关闭这个功能

  3. 点击右上角的X按钮。可以通过:show-close="false"来隐藏这个按钮

  4. 自己定义的取消，关闭。核心是修改visiable=false

    为了防止用户误操作，可将上面的1， 2两种方式关闭。

    <el-dialog
      title="添加或者修改"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
      :visible.sync="showDialog"
    >
      <addor-eidt />
    </el-dialog>

勇敢牛牛，冲冲冲
关注
  • 9
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-dialog仅可通过关闭按钮进行关闭
最新发布
Aa12364567的博客
03-29 374
添加 :close-on-click-modal=“false”el-dialog仅可通过关闭按钮进行关闭。
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
ddf__的博客
01-06 4592
组件时，当点击弹框外的空白处时，仍然会触发关闭弹框事件，一些业务场景不适合使用这种交互，需要只能点击关闭和取消按钮才消失。
el-dialog点击右上角的×关闭，会报错
farmss的博客
11-02 1690
el-dialog点击右上角的×关闭，会报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show" <div> <el-di.
element Dialog 关闭属性解析
qq_39004843的博客
08-04 317
element Dialog 关闭属性解析。
element ui中父子组件共用一个el-dialog弹窗，切换组件页面弹窗进行关闭
好看的皮囊千篇一律，有趣的灵魂万里挑一。
10-07 1301
在Vuex中创建一个状态来管理弹窗的显示状态（例如，showDialog）。在需要打开或关闭弹窗的地方，触发事件，然后在el-dialog所在的组件中监听这些事件，以控制弹窗的显示与隐藏。在el-dialog中使用v-if或v-show根据showDialog的值来控制弹窗的显示与隐藏。在父组件中使用provide来提供一个控制弹窗显示的方法，或者提供一个布尔值的ref。子组件可以调用提供的方法或者监听提供的ref来控制弹窗的显示与隐藏。在子组件中使用inject来获取这些提供的数据。
elementui的dialog点击右上角关闭按钮关闭dialog
wangaiwen的博客
03-08 3517
elementui的dialog点击右上角关闭按钮关闭dialog
Element-UI的dialog弹窗的右上角的叉号不能关闭弹窗
weixin_45724648的博客
08-18 4032
<el-dialog title="" :visible.sync="dialogTableVisible" :before-close="ai_dialog_close"> <el-tree :data="gridData" show-checkbox default-expand-all node-key="id" ref="tree" ...
vant-ui组件调用Dialog弹窗异步关闭操作
01-18
需求描述：官方文档又是组件调用方式，又是函数调用方式。 我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。 一个很简单的东西，element-ui用的...
vue多种弹框的弹出形式的示例代码
12-08
1、父组件引入子组件，子组件的加载问题 products.vue引入dlAddProd弹框（dlAddProd.vue），由于”visible”>，所以在products页面加载时，dlAddProd会被加载。...由于element-UI的弹框组件el-dialog在其body
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
全局直接使用js调用 this.$confirmation() 调用通用提示弹窗可二次封装 点击确认取消后 会有相应的回调 利用的Promise封装的
Vue组件开发技巧总结
01-19
接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件。 正文 Vue 单文件组件开发 当使用vue-cli初始化一个项目的时候，会发现src/components文件夹下有一个HelloWorld.vue文件，这便是单文件组件的基本...
element ui的el-dialog点击关闭的问题
热门推荐
Beam
04-30 1万+
el-dialog属性 close-on-click-modal，是否可以通过点击 modal 关闭 Dialog，默认为true。 现象 正常设置后，有时点击没有关闭对话框，而是先亮了，然后再次点击才成功关闭对话框。 原因 弹出对话框后发现，el-dialog__wrapper被设置了margin-top，导致上面部分没有dialog遮罩。 因此，点击上半部分会出现，先亮屏幕再次点击才能关闭，点...
VUE element-ui之Dialog对话框关闭事件
HanXiaoXi_yeal的博客
05-21 7617
步骤： 在标签中定义事件 <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="annularPopup" width="60%" center @close="closeDialog" > js调用方法即可 closeDialog() { this.$refs.tableList.cl
el-dialog打开与关闭的几种方式
hikktn的博客
06-17 1万+
欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！欢迎大家关注我的知识库，Java之从零开始·语雀你的关注就是我前进的动力！CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。 ​父组件 子组件 第二种 ref 父组件 this.refs.dialog.visible=true;在兄弟组件中this.refs.dialog.visible = true; 在兄弟组件中 this.refs.dialog.visible=true;在兄弟组件中this.parent.$refs
vue3+element plus+typescript实现el-dialog弹框拖拽并添加详细注释，要是公共方法，其他多个组件可以调用
05-26
好的，下面为您提供一份实现el-dialog弹框拖拽的代码，包含详细注释，并且可以作为公共方法供其他组件调用。 首先，我们先创建一个mixin，命名为`dialogDragMixin.ts`，在该文件中实现弹框拖拽的功能。 ```typescript import { DirectiveBinding } from 'vue'; import { ElDialog } from 'element-plus'; // 定义接口，用于存储弹框的位置信息 interface DialogPosition { top: number; left: number; } // 定义一个变量，用于存储弹框的位置信息 let dialogPosition: DialogPosition = { top: 0, left: 0 }; export default { // 指令钩子函数，当元素插入到 DOM 中时执行 mounted(el: HTMLElement, binding: DirectiveBinding) { // 获取el-dialog组件实例对象 const dialog: ElDialog = binding.instance.$parent as ElDialog; // 获取弹框的标题栏元素 const dialogHeaderEl: HTMLElement = el.querySelector('.el-dialog__header')!; // 设置标题栏的样式，使其可以被拖拽 dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.userSelect = 'none'; // 鼠标按下事件处理函数 const handleMouseDown = (event: MouseEvent) => { // 记录鼠标按下时的位置信息 dialogPosition.top = dialog.$el.offsetTop; dialogPosition.left = dialog.$el.offsetLeft; // 记录鼠标按下时的坐标信息 const mouseX = event.clientX; const mouseY = event.clientY; // 鼠标移动事件处理函数 const handleMouseMove = (event: MouseEvent) => { // 计算鼠标移动时的偏移量 const offsetX = event.clientX - mouseX; const offsetY = event.clientY - mouseY; // 更新弹框的位置信息 dialog.$el.style.top = dialogPosition.top + offsetY + 'px'; dialog.$el.style.left = dialogPosition.left + offsetX + 'px'; }; // 鼠标抬起事件处理函数 const handleMouseUp = () => { // 移除鼠标移动事件处理函数和鼠标抬起事件处理函数 document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; // 添加鼠标移动事件处理函数和鼠标抬起事件处理函数 document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; // 添加鼠标按下事件处理函数 dialogHeaderEl.addEventListener('mousedown', handleMouseDown); } } ``` 接下来，我们在需要使用该mixin的组件中引入它，并将其添加到`mixins`属性中即可。 ```vue <template> <el-dialog title="Dialog Title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" v-dialogDrag > <span>Dialog Content</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="dialogVisible = false">Confirm</el-button> </span> </el-dialog> </template> <script lang="ts"> import { defineComponent } from 'vue'; import dialogDragMixin from './dialogDragMixin'; export default defineComponent({ name: 'MyComponent', mixins: [dialogDragMixin], data() { return { dialogVisible: false }; }, methods: { handleClose(done: () => void) { this.$confirm('Confirm to close this dialog?') .then(() => { done(); }) .catch(() => {}); } } }); </script> ``` 最后，我们可以将`dialogDragMixin`作为一个公共方法，供其他多个组件调用。在`main.ts`中，全局注册该mixin即可。 ```typescript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import dialogDragMixin from './dialogDragMixin'; const app = createApp(App); // 注册全局mixin app.mixin(dialogDragMixin); app.use(ElementPlus).mount('#app'); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值