位置: IT常识 - 正文

以element ui为例分析前端各种弹窗和对话框的使用场景与区别(element ui的作用)

编辑:rootadmin
以element ui为例分析前端各种弹窗和对话框的使用场景与区别 文章目录摘要Dialog 对话框Drawer 抽屉Notice 通知MessageBox 弹框Popconfirm 气泡确认框Message 消息提示Notification 通知Dialog 对话框与Drawer 抽屉的区别MessageBox和Dialog的区别Message消息提示与Notification通知的区别摘要

推荐整理分享以element ui为例分析前端各种弹窗和对话框的使用场景与区别(element ui的作用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:element ui的好处,elementui基于vue,element ui设计,element ui有什么用,elemental ui,element ui介绍,elemental ui,element ui的作用,内容如对您有帮助,希望把文章链接给更多的朋友!

本文研究分析element ui 中的各种弹窗和对话框,包括了:Dialog 对话框,Drawer 抽屉,MessageBox 弹框,Popconfirm 气泡确认框,Message 消息提示,Notification 通知。同时说明了Dialog 对话框与Drawer 抽屉的区别、MessageBox和Dialog的区别以及Message消息提示与Notification通知的区别。

Dialog 对话框

在保留当前页面状态的情况下,告知用户并承载相关操作。

<el-dialog :title="title" :visible.sync="open" width="500px"> <el-form ref="form" :model="form" :rules="rules" label-width="108px"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="名称"/> </el-form-item> <el-form-item label="图片" prop="icon"> <oss-image-upload v-model="form.icon" :limit="1" /> </el-form-item> <el-form-item label="状态"> <DictRadio v-model="form.showStatus" size="small" :radioData="dict.type.sys_normal_disable"/> </el-form-item> <el-form-item label="排序" prop="sort"> <el-input v-model="form.sort" placeholder="排序"/> </el-form-item> <el-form-item label="层级" prop="level"> <el-input v-model="form.level" placeholder="层级"/> </el-form-item> <el-form-item label="上级分类" prop="parentId"> <product-category-select class="w200" v-model="form.parentId" :props="{ checkStrictly: true }"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog>Drawer 抽屉

有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.

<el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose"> <span>我来啦!</span></el-drawer>以element ui为例分析前端各种弹窗和对话框的使用场景与区别(element ui的作用)

Notice 通知MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。

<template> <el-button type="text" @click="open">点击打开 Message Box</el-button></template><script> export default { methods: { open() { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); } } }</script>Popconfirm 气泡确认框

点击元素,弹出气泡确认框。

<el-popconfirm title="这是一段内容确定删除吗?">Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

Notification 通知

悬浮出现在页面角落,显示全局的通知提醒消息。

Dialog 对话框与Drawer 抽屉的区别

有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。

MessageBox和Dialog的区别

messagebox相当于系统自带的alert,适合展示简单的内容,如果展示的内容较为复杂时则使用dialog

Message消息提示与Notification通知的区别

通常是对某个动作操作的执行结果的反馈。即做的怎么样,比如删除、合并、移入、导入等操作后,用户需要知道系统有没有按自己预期的执行、是否成功。Notification往往是系统主动推送的、用户未知的消息。比如说新邮件到达的通知,以及一条新评论等,也可能是某种状态的变化,比如说。

本文链接地址:https://www.jiuchutong.com/zhishi/297444.html 转载请保留说明!

上一篇:一键部署自己的ChatGPT!(一键部署源码)

下一篇:web渗透之文件上传漏洞(web渗透违法吗)

  • 粉丝经济:从吸引到忠诚(粉丝经济是一把什么,利用的好可以无往不利)

    粉丝经济:从吸引到忠诚(粉丝经济是一把什么,利用的好可以无往不利)

  • vivo手机电量显示怎么设置(vivo手机电量显示)

    vivo手机电量显示怎么设置(vivo手机电量显示)

  • 腾讯qq空间怎么设置背景音乐(qq空间怎样)

    腾讯qq空间怎么设置背景音乐(qq空间怎样)

  • 微信好友请求多久过期(微信好友请求多久没有记录)

    微信好友请求多久过期(微信好友请求多久没有记录)

  • 手机qq多久不动就显示离线(手机qq多久不动就显示4g)

    手机qq多久不动就显示离线(手机qq多久不动就显示4g)

  • mbt6a5是小米什么机型(小米mbt6a5多少钱)

    mbt6a5是小米什么机型(小米mbt6a5多少钱)

  • 华为手机怎样添加桌面天气和时间(华为手机怎样添加联系人)

    华为手机怎样添加桌面天气和时间(华为手机怎样添加联系人)

  • 苹果xs屏幕发黄正常吗(苹果xs屏幕发黄怎么办)

    苹果xs屏幕发黄正常吗(苹果xs屏幕发黄怎么办)

  • 三星s10怎么OTG功能用不了(三星s10手机ot g在哪儿打开)

    三星s10怎么OTG功能用不了(三星s10手机ot g在哪儿打开)

  • 抖音可以用抖音号登录吗(抖音可以用抖音号登录方式)

    抖音可以用抖音号登录吗(抖音可以用抖音号登录方式)

  • 手机用了两年,现在太卡了怎么办(手机用了两年发烫是什么原因)

    手机用了两年,现在太卡了怎么办(手机用了两年发烫是什么原因)

  • 华为手机怎么微信分身设置(华为手机怎么微信录音)

    华为手机怎么微信分身设置(华为手机怎么微信录音)

  • ms cm是什么单位(ms是啥单位名称)

    ms cm是什么单位(ms是啥单位名称)

  • vivox30厚度(vivox30机身尺寸)

    vivox30厚度(vivox30机身尺寸)

  • 苹果xr怎么下载app(苹果XR怎么下载软件)

    苹果xr怎么下载app(苹果XR怎么下载软件)

  • 屏幕显示时长怎么设置(屏幕显示时长怎么调电脑)

    屏幕显示时长怎么设置(屏幕显示时长怎么调电脑)

  • 美团怎么看vip等级(美团怎么看vip等级排名)

    美团怎么看vip等级(美团怎么看vip等级排名)

  • 陌陌设备封号是不是就得换手机了(陌陌封号对设备的影响)

    陌陌设备封号是不是就得换手机了(陌陌封号对设备的影响)

  • n3手机是什么牌子手机(n3手机是什么牌子的)

    n3手机是什么牌子手机(n3手机是什么牌子的)

  • 如何让微信静音(苹果手机如何让微信静音)

    如何让微信静音(苹果手机如何让微信静音)

  • 海信电视u盘助手在哪(海信电视u盘助手下载)

    海信电视u盘助手在哪(海信电视u盘助手下载)

  • surface退出平板模式(微软平板电脑surfacego2怎么退出s模式)

    surface退出平板模式(微软平板电脑surfacego2怎么退出s模式)

  •  闲鱼中3小时公益是什么(闲鱼三个小时确认收货)

    闲鱼中3小时公益是什么(闲鱼三个小时确认收货)

  • 抖音单张图片怎么加音乐(抖音单张图片怎么能不动)

    抖音单张图片怎么加音乐(抖音单张图片怎么能不动)

  • mvvm模式和mvc的区别(mvvm模式和mvc的区别面试)

    mvvm模式和mvc的区别(mvvm模式和mvc的区别面试)

  • Linux下使用Speedtest测试网速的方法(linux 速度)

    Linux下使用Speedtest测试网速的方法(linux 速度)

  • 购买车辆保险的报告
  • 赠与房屋再次出售的缴税问题有哪些
  • 企业进项不足的原因
  • 专项扣除三险一金为0
  • 汇算清缴常见问题
  • 信息技术费如何做账
  • 企业对公账户转法人私户
  • 小规模机械租赁公司
  • 无法收回的应收账款情况说明
  • 事业单位职工福利费范围有哪些
  • 地质勘察费用应由谁支付
  • 发票认证费用
  • 哪些费用可以进项抵扣
  • 哪些费用应该计税
  • 增值税发票三个点
  • 个人独资所得税税率表最新
  • 单位为员工报销的博士学费算什么费用
  • 合同资产减值准备对应科目
  • 减值 计提
  • 待摊费用做账
  • 残疾人保障金工资总额包括社保吗
  • 产业政策鼓励类
  • 小规模纳税人的认定标准是什么
  • 公司增值税发票怎么开
  • 自然人独资企业交什么税
  • world超链接
  • vue3如何
  • 劳务人员劳务费
  • 国家信用信息公司系公示
  • cpu主频在哪看
  • 材料成本差异如何分摊
  • 文件pages
  • 景区门票定价方法
  • 苹果15手机价格和图片颜色
  • 企业的存货采用计划成本核算,某年年末,结
  • 如何确定赞助对象
  • 怎么给复选框赋值
  • 手把手教你在瑞典停车
  • 单位应缴住房公积金
  • python 函数 global
  • 小规模纳税人销售商品会计分录
  • 资产负债所有者权益借贷方向
  • 床垫发票
  • 普通的收据可以入账吗
  • 进出口 外汇
  • 运费发票如何做分录
  • 公司注销时退还实收资本要交个税吗
  • 事业单位实收资本如何做账
  • 票据贴现无效如何讨要票据款
  • 纳税人延期缴纳税款
  • 销售不动产计税税率
  • 物流公司保险怎么买
  • 视同销售的几种情况
  • sql常用语句大全简书
  • sql server real
  • 微软每月补丁更新一般于什么时间发布
  • linux系统检测
  • ubuntu系统安装nvidia显卡驱动
  • office解压后如何安装
  • Win10预览版怎么变回正式版
  • win7升级win8.1失败
  • windows更新后风扇不转
  • rundll32.exe是什么程序
  • windows10离线地图
  • win7怎么连接手机上网
  • git 登陆用户
  • jquery 字符串以什么开头
  • android EditText 需要输入文本时调不出来软键盘 解决方案(亲测有效)
  • shell 数组变量
  • win7系统设置wifi热点
  • linux中的shell命令
  • unity按钮函数
  • unity2020怎么导入资源
  • 如何利用Fabric自动化你的任务
  • 江西省税务局拟录用人员公示
  • 增值税一般纳税人资格登记表
  • 泰兴市税务局办税服务厅
  • 小规模国税申报表填写方法
  • 黄金手镯可以卖出去吗
  • 税务文书保存期限分几类
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设