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

  • 电费发票隔月开如何做账
  • 增值税发票综合服务平台红字确认
  • 什么情况借钱
  • 文化事业建设费减免政策
  • 主营业务怎么计算
  • 减免增值税款怎么算
  • 市政押金无法收回的损失可以税前扣除吗
  • 收到损坏赔偿款怎么入账
  • 员工本地住宿费会计分录
  • 股东费用如何入账
  • 独资企业要交税吗
  • 房地产开发企业会计科目
  • 预付账款发票到货未到怎么做账
  • 将汽车奖励给员工财务如何处理?
  • 一般纳税人进项税额转出会计分录
  • 增值税多缴纳0.03怎么算
  • 房地产土地抵扣
  • 营改增后房屋租赁如何纳税
  • 企业2015年申报抵扣的增值税,2016年检查有11000元不得抵扣,需要补交增值税11000元并收滞纳金及罚款1200元,请问老师具体该怎么做账,谢谢
  • 私自安装路灯违法吗?
  • 销售商品代垫的运杂费会计分录
  • 工资薪金所得的个人所得税筹划方法
  • 什么情况可以出境
  • win10专业版版本号2009
  • linux的sed命令
  • 私募证券投资如何交易
  • php代码生成器
  • PHP验证信用卡卡号是否正确函数
  • 会计中记账凭证的名词解释
  • macos使用技巧
  • 在企业所得税前扣除的有哪些
  • 公司简易注销的公示期多长时间
  • 委托外部加工材料支付加工费计入
  • 公司帮员工买社保能扣税吗
  • 硬盘跳线设置
  • 最早能玩游戏的人
  • 非贸付汇代扣代交哪些税
  • php搜索框查询数据库
  • windows. location
  • 预处理数据的方法
  • ChatGPT全面升级,GPT4支持多模态数据。
  • 微信小程序开发一个多少钱
  • transformerss
  • 每个公司都要交房产税吗
  • 什么是财务报表分析,方法有哪些
  • 个人社保进费用,还要报个税么
  • 织梦自定义表单diy.php更改名字
  • phpcms api
  • 增值税附表3
  • 没有以前年度损益科目应该加在什么地方
  • 服务费的增值税可以抵扣吗
  • 建筑企业结转收入方法
  • 定期定额户增值税起征点
  • 个体工商户税务注销流程
  • 员工退回备用金怎么写收据
  • 进货时的运费计入什么
  • 微信验证收到的信息在哪
  • 城乡居民死亡后需要办理什么手续
  • 公司与公司之间可以借款吗
  • 无形资产及其他资产包括哪些科目
  • 什么时候确认应收
  • 报销程序是什么
  • mysql alter table修改表命令整理
  • sql根据名字查询
  • 教你鉴别耳机音质的好坏的几大技巧
  • 交换机操作系统版本
  • winxp如何删除网卡驱动
  • centos6.5双网卡绑定
  • win7或win8、win8.1系统下安装ubuntu实现双系统图文教程
  • 苹果mac 最新系统
  • 怎样把系统及软件迁移到固态
  • win10驱动备份在哪里
  • Win7中TrustedInstaller.exe进程占用内存高该怎么解决?
  • cocos2d在运行java eclipse程序时出现 Error: could not open c:program FilesJavajre6libamd64jvm.cfg
  • jquery prototype
  • linux分区类型默认的是什么
  • jquery mobile demo
  • 河北华盛税务师事务所
  • 公安驻税务联络办公室
  • 2008土地管理办法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设