关于easyui for vue的Dialog使用部分问题和解决

最新推荐文章于 2023-07-28 14:36:07 发布
最新推荐文章于 2023-07-28 14:36:07 发布
阅读量887 收藏 1
点赞数
分类专栏： 前端 文章标签： vue easyui dialog JavaScript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014418725/article/details/112323512
版权
本文介绍了在使用easyui for vue的Dialog组件时遇到的默认打开状态和缺少visible属性的问题。分析了由于使用v-if控制显示导致的组件初始化问题，以及不能直接通过$refs调用Dialog方法的原因。解决方案是在mounted阶段设置Dialog初始关闭状态。
摘要由CSDN通过智能技术生成

目录

 

问题

分析

解决

问题

在easyui for vue 的 Dialog使用过程中，参照element-ui和网上的博客思路和代码，对Dialog的打开和关闭出现问题。

主要体现在

1.Dialog默认打开状态；

2.没有visible属性，用v-show或者v-if控制显示，出现异常。

分析

首先看easyui for vue的Dialog相关属性和方法

这是element-ui的Dialog属性和方法

可以看到，easyui for vue没有visible的属性。

网上通常的方法都是v-if来控制，参考 【1】

最低0.47元/天 解锁文章
月想容
关注
专栏目录
EasyUI Dialog组件
qq_31781327的博客
04-23 326
**1.对话框常用属性介绍** 1.1dialog组件定义：jQuery EasyUI 对话框（Dialog）用法与EasyUI的窗口用法极为相似，最终的效果图仅与窗口的效果图相差几个按钮，该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。 1.2dialog对话框组件常用属性 属性名 属性值类型 描述
elementui中el-dialog初次打开能调mounted,再次打开不调,v-if解决
沧海一粟
09-20 3579
el-dialog组件在第一次使用的时候没有问题，mounted也可以触发，但是关闭dialog后再次弹出就不再走mounted，导致可能没有办法及时获取到新的数据。我的解决办法是使用watch来进行监听。
EasyUI 框架中 Dialog 对话框
强者惜字如金，弱者废话连篇！
01-05 325
EasyUI 框架中 Dialog 对话框 <!-- html文件 --> <!-- 按钮 --> <a href="#" class="easyui-linkbutton" onclick="openAdd1()" plain="true">选择商品</a> <!-- 弹框 --> <div id="wu-dialog-1" class="easyui-dialog" data-options="clos
vue-EasyUI设置Dialog弹框默认隐藏
qq_42341467的博客
10-24 1492
vueEasyUI解决Dialog弹框默认显示，通过close方法进行默认隐藏
VUE cli3 搭建vue项目引入EasyUI框架，出现错误！！！You are using the runtime-only build of Vue where the template com
袁的博客
09-16 907
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build
前端 input怎么显示null_Spring Security(六):前端菜单，角色权限页面的搭建
weixin_39857174的博客
11-30 138
文章回顾:Spring Security（一）：整合JWT实现登录功能Spring Security（二）：获取用户权限菜单树Spring Security（三）：与Vue.js整合Spring Security（四）：更新前端路由获取方式Spring Security（五）：前后端权限控制详解Spring Security（六）：前端菜单，角色权限页面的搭建目前项目中做了几个有关权限控制的页面，...
jQuery EasyUI Dialog拖不下来如何解决
11-23
使用jquery easyui可以很容易的创建很炫的前台页面，最近在使用过程中发现dialog存在一个问题：  用户将dialog拖出页面后，dialog就不能拖下来了，除非要重新打开页面，这个问题对于用户体验来说是非常重要的， ...
easyUI框架之Dialog、Layout、DateBox、Pagination
最新发布
哈哈
07-28 543
二、引入使用easyUI引入js文件的顺序不要搞反了，有的童鞋经常会发现我引入了js文件为什么会报一些莫名奇妙的问题，最多的应该就是未定义undefined，其实大多时候都是js文件引入顺序的问题。我们知道网页在加载我们的index页面的时候，会从上往下以此加载，那么有一些js文件依赖jquery文件，顺序搞错了的话，将会先加载其他的js，最后再加载jquery，这就导致出现上述未定义的问题，所以要注意引入的顺序
easyui官方离线文档
12-26
10. **问题排查和优化**：文档还会涵盖一些常见问题的解决方案，帮助开发者解决在使用过程中遇到的问题，提升开发效率。 总之，"easyui官方离线文档"是一个全面且实用的资源库，它涵盖了从基础使用到高级特性的所有...
easyui 基本布局
weixin_65089602的博客
05-05 208
思维导图 入门 环境安装:下载 解压 5个(2个CSS[easyui.css icon.css] 3个JS[jQuery.js easyui.js CN.js]) 公共页面 head.jsp ctx取绝对路径 防止404 控件的使用：layout 几种方式去学控件：1.Demo 2.API离线文档 属性 方法 事件 http://www.jeasyui.net/（中文网） http://www.jeasyui.com/（英文版） EasyUI官方下载地址：http://www.je..
VUE3 学习笔记（八）引入 EasyUI for Vue
sensor_WU 博客
04-17 2818
介绍Vue3中安装，引入EasyUI的方法以及遇到的不支持ts而出现红色提示的解决方法
Vue EasyUI tabs 弹出 Context Menu 菜单事件
书写人生
07-09 616
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI for Vue</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel=.
easyui01
m0_67690006的博客
04-05 1257
目录 1、easyui介绍 2、easyui的优缺点 3、搭建框架 4、插入css及其js 5、布置布局 一、easyui介绍 easyui是基于jQuery、Angular.、Vue和React的用户界面组件的集合。 easyui提供了构建现代交互式javascript应用程序的基本功能。 二、easyui的优缺点 不足之处： 从效果来看easyui的界面效果要远远差于bootstrap 跟layui比，界面效果也更差 优点： 1.从学习文档的完整性、前端框架的稳定性，组件的丰富
easyui for vue input文件上传功能实现代码
bluemengcom的博客
11-02 366
1、先看效果展示。 2、html代码 <div class="formStyle_list"> <div class="f-l"> <Label for="file" class="f-l">证书文件</Label> <TextBox inputId="file" n...
Vue版EasyUI 的学习
chuijian2218的博客
04-19 1331
组件方法（method）的使用要点： 1，不要在组件内监听组件本身的方法， 2，使用的时候，利用vue的$refs属性来引用， 小例子： <template> <div> <LinkButton iconCls="icon-add" :toggl...
jQuery EasyUI系列教程之入门篇
baosheng2021的专栏
09-12 1304
从今天开始将和大家一起学习jqueryeasyui。 1. 先浏览http://www.jeasyui.com/网站，官网上是这样介绍easyui的jQuery EasyUI framework helps you build your web pages easily。为网页开发提供了一堆的常用UI组件，包括按钮、菜单、对话框、布局、窗帘、表格、表单等等组件，这些组件都是基于jquery的。
el-dialog组件隐藏时直接销毁组件
qq_43750656的博客
10-19 1760
使用el-dialog组件时，不通过v-model绑定的布尔类型的变量来控制是否隐藏展示，而是在需要不展示的时候直接销毁组件。在组件上标识 v-if 可控制组件隐藏时直接销毁dialog。
关于vue + elementUI 的dialog弹窗清空弹窗内值的问题
hunter
06-22 6363
近来比较繁忙，所以博客近期一直没有更新，今天就来和大家说说关于elementUI dialog弹窗清空值的问题在vue + elementUI项目中有时候会大量的用到弹窗这个组件，所以就对这个组件进行了统一封装。但是对于弹窗中的值的清空问题就有些麻烦了。 当dialog 中嵌套的是form表单时，我们可以使用Element UI自带的清空form表单方法 this.$refs.formData.resetFields(); //重置表单数据，清除校验信息 或者手动的去重置清空表单数据 this.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值