位置: 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渗透违法吗)

  • 华为手表查询激活日期(华为手表查询激活日期跟自己激活日期不符)

    华为手表查询激活日期(华为手表查询激活日期跟自己激活日期不符)

  • 钉钉如何家长和孩子同时使用(钉钉如何家长和孩子共享)

    钉钉如何家长和孩子同时使用(钉钉如何家长和孩子共享)

  • 华为荣耀20用的啥屏(华为荣耀20用的什么芯片)

    华为荣耀20用的啥屏(华为荣耀20用的什么芯片)

  • 微信号被永久封了还想用这个号码怎么办(微信号被永久封禁还能解开吗)

    微信号被永久封了还想用这个号码怎么办(微信号被永久封禁还能解开吗)

  • 快手注销第一项不通过(快手注销账号最后一步)

    快手注销第一项不通过(快手注销账号最后一步)

  • 魅族发布会时间(魅族发布会最多的一年)

    魅族发布会时间(魅族发布会最多的一年)

  • 插排usb口突然失灵(插排usb口突然失灵怎么办)

    插排usb口突然失灵(插排usb口突然失灵怎么办)

  • 腾讯会议不支持平板吗(腾讯会议不支持华为平板吗)

    腾讯会议不支持平板吗(腾讯会议不支持华为平板吗)

  • 微信群主退群后群还在吗(微信群主退群后群主会转让给谁)

    微信群主退群后群还在吗(微信群主退群后群主会转让给谁)

  • 微信客户端在哪里(微信客户端在哪里打开OPPO)

    微信客户端在哪里(微信客户端在哪里打开OPPO)

  • 华为手机呼吸灯怎么关(华为手机呼吸灯在哪里设置方法)

    华为手机呼吸灯怎么关(华为手机呼吸灯在哪里设置方法)

  • 增强信息和短信有什么区别(增强信息和短信有什么区别收费)

    增强信息和短信有什么区别(增强信息和短信有什么区别收费)

  • 网络安全技术主要包括哪些技术(网络安全技术主要学什么)

    网络安全技术主要包括哪些技术(网络安全技术主要学什么)

  • 微信视频可以用美颜相机视频吗(微信视频可以用假视频吗)

    微信视频可以用美颜相机视频吗(微信视频可以用假视频吗)

  • 华为手机黑屏怎么修复(华为手机黑屏怎么导出数据)

    华为手机黑屏怎么修复(华为手机黑屏怎么导出数据)

  • vue在不同时间添加字幕(vue不同角色不同页面)

    vue在不同时间添加字幕(vue不同角色不同页面)

  • 小王卡和大王卡的区别(大王卡小王卡区别)

    小王卡和大王卡的区别(大王卡小王卡区别)

  • 深色模式有什么用(深色模式怎么设置)

    深色模式有什么用(深色模式怎么设置)

  • 说说怎么取消自己可见(说说怎么取消自动点赞)

    说说怎么取消自己可见(说说怎么取消自动点赞)

  • 联想主板型号怎么看(联想主板编号在哪)

    联想主板型号怎么看(联想主板编号在哪)

  • 关于Chrome新建标签页被hao123劫持(chrome新建标签为打开特定网页)

    关于Chrome新建标签页被hao123劫持(chrome新建标签为打开特定网页)

  • TypeScript选项‘importsNotUsedAsValues‘和‘preserveValueImports‘弃用(typescriptlang)

    TypeScript选项‘importsNotUsedAsValues‘和‘preserveValueImports‘弃用(typescriptlang)

  • html+css唯美登录页面,代码提供(效果展示)(html+css登录页面)

    html+css唯美登录页面,代码提供(效果展示)(html+css登录页面)

  • Bug 追踪器的演变(bug的定位和跟踪)

    Bug 追踪器的演变(bug的定位和跟踪)

  • 销售分哪几类
  • 个体工商户还没有使用怎么注销
  • 年末暂估下年怎么入账
  • 企业注销处置固定资产需要缴纳哪样税
  • 业务员不拿工资怎么办
  • 印花税漏报,税务局怎么罚款
  • 一般纳税人财务报表月报还是季报
  • 自产的不同产品有哪些
  • 交通运输业安全心得体会范文
  • 增值税专用发票抵扣期限
  • 营改增后加工行业的税率是多少?
  • 滴滴客运服务费免税
  • 企业以现金形式支付货款
  • 个税申报中劳务报酬
  • 专用发票不抵扣联可以当普票用吗?
  • 财务软件利润表没显示
  • 预提固定资产折旧费
  • 备用金转账个人能转吗
  • 增值税防伪税控系统采用什么技术保护涉税信息
  • 怎么租办公室省钱
  • 两个公司的资金怎么合并
  • 生育津贴申请表打印
  • macbook显示隐藏文件
  • live updater
  • 开发产品结转到哪个科目
  • 企业租房费用可以计入成本吗
  • 所有者权益会计要素包括
  • 稿酬所得的个税怎么计算
  • 约当产量法的会计分录
  • 公司制作横幅计入什么科目?
  • php读取mysql
  • 07. vue3+vite+qiankun搭建微应用前端框架,并接入vue3微应用
  • 发票写的是信息怎么办
  • 润滑油一般纳税人税率是多少
  • 企业接受的非货币性投资按照 计入实收资本
  • 增值税在纳税申报表中怎么得出
  • 金蝶现金流量表不对怎么处理
  • 爬虫工程师简介
  • java初学者教程
  • 将购入的原材料用于不动产在建工程
  • 支付对价的公允价值的处理
  • 甲企业持有乙企业股票的市价为920000
  • 增值税发票如何作废流程
  • sql server 2008使用
  • 企业收到投资款应贷记什么账户
  • 个税申报当月申报了上月应发工资怎么调整
  • 服装改制注意事项
  • 减免税的三种方式
  • 企业缴纳耕地占补多少
  • 进项税额转出冲回
  • 股东分红会计分录
  • 个人所得税财产转让所得税率
  • 报销未收到发票怎么做账
  • 赠品当商品卖
  • 企业注销时应收帐款如何处理
  • 计提是好是坏
  • 员工出差的餐费可以抵扣吗
  • centos6.5下mysql 5.7.19 安装配置方法
  • 数据库left joins
  • mysql 5.7.31安装
  • 如何在mysql显示当前用户
  • 将Sublime Text 2固定到Ubuntu启动器的方法
  • 开机出现系统错误怎么办
  • 通用pe工具箱安装win7
  • 电脑怎样进入安全模式
  • w7系统删除所有东西
  • ubuntu 系统卡住
  • win8截屏在哪个文件夹
  • winpe怎么弄
  • layui nodejs
  • shell中break和continue
  • python输入错了怎么办
  • jquery中的siblings方法
  • node.js web
  • unity3d Human skin real time rendering with blood and water drop effect真实模拟人皮实时渲染之血液和水珠掉落效果
  • javascript面向对象精要pdf
  • unity-x
  • js面向接口编程
  • 集资房税收问题
  • 泉州企业医保哪里缴费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设