分类：Dialog

2021
10-16

Vue实现Dialog封装

目录Vue2写法Vue3插件版写法Vue3动态组件写法一些比较hack的写法在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单，常用的交互就是把表单以弹窗的形式展示，但是在每个页面又重复的引入表单组件有时候又很麻烦解决方案有两个：在根组件里面引入动态组件，在业务里面通过this.$root.openDialog(name,props)去控制动态组件的展示形式封装成插件的形式去调用，比如this.$dialog('EditDialog.vue',pr... 继续阅读 >

2020
12-14

详解如何在vue+element-ui的项目中封装dialog组件

1、问题起源由于Vue基于组件化的设计，得益于这个思想，我们在Vue的项目中可以通过封装组件提高代码的复用性。根据我目前的使用心得，知道Vue拆分组件至少有两个优点：1、代码复用。2、代码拆分在基于element-ui开发的项目中，可能我们要写出一个类似的调度弹窗功能，很容易编写出以下代码：<template><div><el-dialog:visible.sync="cnMapVisible">我是中国地图的弹窗</el-dialog><el-dialog:visible.sync="u... 继续阅读 >

2020
11-19

elementUI同一页面展示多个Dialog的实现

要实现的效果如下：首先官方文档是这样描述的：但是我写了个小demo发现并不能直接平级放置即可，一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog。原因如下：因为dialog先后顺序不同z-index设置的层级不同，所以必定会覆盖遮挡那么我们要实现一个这样的效果不仅仅平级放置即可，就要用到里面的一个属性：modal下面贴上代码：总的思路就是：dialog先后顺序重叠问题，使用便宜去让它们错开；然后就是遮罩层导... 继续阅读 >

2020
10-10

electron踩坑之dialog中的callback解决

踩坑分析之前版本使用dialog时选择文件时，可以加入callback，来获取被选择文件的路径，而electron10更新后发生了改动，采用了Promise对象来获取结果。electron10之前我们获取文件路径，只需加入callback即可，也就是下述写法，且之前返回的data结果直接是文件的路径。openDialogDom.onclick=function(){remote.dialog.showOpenDialog({properties:['openFile']},function(data){console.log(data)})}解决electro... 继续阅读 >

2020
10-10

element-ui中dialog弹窗关闭按钮失效的解决

如下所示：<el-dialogtitle="修改库存":visible.sync="kcDialog"@close="kcDialog=false">...</el-dialog>加一个@close可以是一个方法或者直接操作kcDialog为false补充知识：webpack外部扩展，依赖前置引入了外部jsindex.html<scriptsrc="https://code.jquery.com/jquery-3.1.0.js"integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="crossorigin="anonymous"></script>js中import$from'jquery'这时候会... 继续阅读 >

2020
10-08

Android自定义Dialog原理实例解析

Android开发过程中，常常会遇到一些需求场景——在界面上弹出一个弹框，对用户进行提醒并让用户进行某些选择性的操作，如退出登录时的弹窗，让用户选择“退出”还是“取消”等操作。Android系统提供了Dialog类，以及Dialog的子类，常见如AlertDialog来实现此类功能。一般情况下，利用Android提供的Dialog及其子类能够满足多数此类需求，然而，其不足之处体现在：1.基于Android提供的Dialog及其子类样式单一，风格上与App本身风格... 继续阅读 >

2020
10-08

Element Dialog对话框的使用示例

组件—对话框基本用法<el-buttontype="text"@click="dialogVisible=true">点击打开Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><spanslot="footer"class="dialog-footer"><el-button@click="dialogVisible=false">取消</el-button><el-buttontype="primary"@click="dialogVisible=false">确定</el-button... 继续阅读 >

2020
09-24

Dialog全屏,去掉状态栏的方式

dialog即使设置全屏了，但还是有状态栏占用高度这；直接将下面这行代码放到你的dialog中即可@OverrideprotectedvoidonStart(){super.onStart();intuiOptions=View.SYSTEM_UI_FLAG_HIDE_NAVIGATION|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_HIDE_NAVIGATION|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION|View.SYSTEM_UI_FLAG_IMMERSIVE|View.SYSTEM_UI_FLAG_FULLSCREEN;this... 继续阅读 >