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

  • 安卓微博有深色模式吗(安卓微博深色模式不见了)

    安卓微博有深色模式吗(安卓微博深色模式不见了)

  • 小天才手表关机怎么查定位(小天才手表关机后是否还能找到位置)

    小天才手表关机怎么查定位(小天才手表关机后是否还能找到位置)

  • 格力空调wifi怎么连接手机(格力空调wifi怎么用)

    格力空调wifi怎么连接手机(格力空调wifi怎么用)

  • 苹果12无线充电多少w(苹果12无线充电怎么用不了)

    苹果12无线充电多少w(苹果12无线充电怎么用不了)

  • opporeno2语音唤醒打不开(opporeno2z语音唤醒)

    opporeno2语音唤醒打不开(opporeno2z语音唤醒)

  • 麒麟980选运存6g还是8g(麒麟980很流畅)

    麒麟980选运存6g还是8g(麒麟980很流畅)

  • 硬盘线插在主板什么位置(硬盘线插在主板上)

    硬盘线插在主板什么位置(硬盘线插在主板上)

  • 充电器头突然不能用了(充电器头突然不好使了怎么办)

    充电器头突然不能用了(充电器头突然不好使了怎么办)

  • bmp是图片文件的后缀名吗(bmp是图片文件的扩展名吗)

    bmp是图片文件的后缀名吗(bmp是图片文件的扩展名吗)

  • 荣耀v20有光学防抖动吗(荣耀v20有没有光学防抖)

    荣耀v20有光学防抖动吗(荣耀v20有没有光学防抖)

  • iphone xr和11区别(iphone xr和11哪个好)

    iphone xr和11区别(iphone xr和11哪个好)

  • 快手里面的直播可以看回放吗(快手里面的直播记录怎么删除)

    快手里面的直播可以看回放吗(快手里面的直播记录怎么删除)

  • 电脑开机后图标显示不出来怎么办(电脑开机后图标位置老是乱)

    电脑开机后图标显示不出来怎么办(电脑开机后图标位置老是乱)

  • cpu和显卡有什么区别(cpu和显卡有什么用)

    cpu和显卡有什么区别(cpu和显卡有什么用)

  • ie8以上浏览器都有什么(ie8.0以上浏览器是电脑浏览器吗)

    ie8以上浏览器都有什么(ie8.0以上浏览器是电脑浏览器吗)

  • 耳机为什么插上不管用(耳机为什么插上去一会断一会连)

    耳机为什么插上不管用(耳机为什么插上去一会断一会连)

  • 华为手机测距仪使用方法(华为手机测距仪在哪里)

    华为手机测距仪使用方法(华为手机测距仪在哪里)

  • 手机抖音连不上网怎么解决(手机抖音连不上麦)

    手机抖音连不上网怎么解决(手机抖音连不上麦)

  • 为什么我的快手极速版看视频金币比别人少(为什么我的快手没有赞赏功能)

    为什么我的快手极速版看视频金币比别人少(为什么我的快手没有赞赏功能)

  • 荣耀play3有指纹吗(荣耀x50i指纹解锁在哪里)

    荣耀play3有指纹吗(荣耀x50i指纹解锁在哪里)

  • 计算机网络包括哪些内容(计算机网络包括哪些方面)

    计算机网络包括哪些内容(计算机网络包括哪些方面)

  • 智能制造发展特点包括(智能制造发展特点包括哪些方面)

    智能制造发展特点包括(智能制造发展特点包括哪些方面)

  •  小米8微信不响提示音(小米8微信没有声音)

    小米8微信不响提示音(小米8微信没有声音)

  • 苹果7plus微信视频怎么开美颜(苹果7plus微信视频如何美颜)

    苹果7plus微信视频怎么开美颜(苹果7plus微信视频如何美颜)

  • 保险税优识别码是保单号吗
  • 待办事项没有印章怎么办
  • 小规模企业所得税会计分录怎么做
  • 中国的税收制度是什么
  • 工资怎么扣费
  • 支出算什么会计科目
  • 应付中转是什么科目
  • 冲减上年度收入的会计分录
  • 工程项目的存货含哪些科目
  • 股东多交投资款处理
  • 减免应收账款账务处理
  • 事业单位职工福利费范围有哪些
  • 付出的房屋押金可以退吗
  • 出口没有退税的发票
  • 半月的发票未认证能用吗
  • 意外死亡公司赔偿多少标准
  • 车辆保险费的车船税计入什么会计科目
  • 所得税清算时坏账怎么算
  • 租赁房使用权和所有权冲突
  • 一般纳税人的主表
  • 期末留抵税额转出怎么报税
  • 样品赠送要确认收入吗
  • 淘宝店铺毛利率多少是正常
  • 银行存款日记账和现金日记账的区别
  • 电子银行承兑汇票到期选择线上清算
  • 租赁服务可以享受加计抵减吗
  • 商铺土地增值税清算
  • 企业发生的亏损不一定会导致所有者权益减少
  • msvcp140.dll丢失怎么办
  • php mysql pdo
  • 百合花怎么养殖简单
  • 错账改正方法
  • 计提本月附加税2496.28
  • 在筹建期间发生的开办费
  • 金税盘减免税款留抵
  • 定额发票累计领取怎么算
  • 法院判定支付对方诉讼费,我可以入账吗
  • 装系统如何不安装自带软件
  • php授权ip访问
  • 个人向公司借款协议书范本
  • 利息调整摊销额计入投资收益吗
  • python frames
  • 不良贷款转让怎么操作
  • 一般纳税人年收入500万交多少税
  • 一般纳税人可以转小规模纳税人吗
  • 货币资金的计税基础
  • 视同销售的几种情况都有什么?
  • 初级职称需要提交什么资料
  • 开票航天信息要交年费吗
  • 企业收取的丢失物品
  • 支持疫情的句子 关于抗击疫情的句子
  • 业务招待费可以进项抵扣吗
  • 员工休产假不发工资违法吗
  • 预计负债是暂时性差异还是永久性差异
  • 专利补贴收入计入什么科目
  • 外聘老师的费用如何做账
  • 免征增值税账务处理办法
  • 固定资产的印花税费计入什么科目里
  • 企业软件开发哪家好
  • 个体工商户个税怎么申报
  • 2019年新政府会计准则解读
  • 来料加工费用价格表
  • sql server使用
  • sql语句大全实例教程
  • win8系统手机
  • windows server vista
  • win8破解密码开机密码
  • linux 截屏
  • win10天气组件
  • ES6 javascript中class静态方法、属性与实例属性用法示例
  • bat批处理命令大全
  • jquery动态设置css
  • node.js写爬虫
  • Python 中urls.py:URL dispatcher(路由配置文件)详解
  • Unity同时接入ShareSdk和微派支付sdk(二)
  • 详解金球奖之争
  • js定义类的三种方法
  • javascript超链接的onclick
  • 广西税务移动办税平台app
  • 税控ic卡就是税控盘吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设