element 确认消息confirm 消息提示message 加载loading 二次封装

最新推荐文章于 2024-08-19 16:45:08 发布

autm许

最新推荐文章于 2024-08-19 16:45:08 发布

阅读量3.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_17108919/article/details/109530861

版权

本文介绍了如何对Element UI的确认弹窗（confirm）、消息提示（message）和加载提示（loading）进行二次封装，提供全局引用和在应用中的使用方法。

摘要由CSDN通过智能技术生成

封装代码

export function nConfirm (msg) {
   
  msg = msg || '确认消息'
  return new Promise((resolve, reject) => {
   
    this.$confirm(msg + '', '提示', {
   
      confirmButtonText:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

autm许

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

element-ui 二次封装系列- button(二)

sky2714的博客

01-11

774

看此篇前,请阅读上一篇https://blog.csdn.net/sky2714/article/details/112494719 在上一篇中, 我们用一个简单的 autoLoading属性二次封装了el-button得到了pl-button组件,本篇中,我们继续丰富pl-button组件. 和自动loading相似,我们经常会有点击按钮需要弹窗二次确认的情况,如:点击删除按钮时,我们需要使用messageBox组件进行二次确认 this.$confirm('此操作将永久删除该文件, 是否继续?',

element el-upload 上传文件组件封装

weixin_45753961的博客

09-04

2149

组件index.vue <template> <div class="applyUpload"> <div class="apply_content"> <div class="upload_content"> <div class="upload_item"> <div class="fileName"><i style="color:red">*</i&

参与评论您还未登录，请先登录后发表或查看评论

vue elementui 弹框确定后加上loading提示

qq_27806371的博客

06-20

2455

vue elementui 弹框确定后加上loading提示

vue写的confirm确认框，loading加载中，message提示消息

12-06

vue写的confirm确认框，loading加载中，message提示消息在vue的模板里引用 import message from './tips/message/index'; import confirm from './tips/confirm/index'; import loading from './tips/loading/index'; 使用comfirm需要在template中这样定义 {{inportExcelMsg}} 确定使用message可以这样定义 //显示提示信息 showMessage:function(msg){ message.installMessage({ message: msg, time: 3000 }); } 使用loading可以在指定的div上这样定义： v-kiko-loading="loading" 使用loading变量来控制显示和隐藏

element的 ElMessageBox 倒计时操作

最新发布

weixin_50559423的博客

08-19

967

组件库中 Feedback 反馈组件（ElMessageBox.confirm），具体需求是在确定按钮下做一个自动倒计时，倒计时结束自动触发确定事件。这里使用element-plus组件库，安装使用看官网。ElMessageBox.confirm 具体使用及配置项官网都有介绍。页面效果是这样：倒计时结束自动触发！废话不多说直接上代码。这里简单介绍下：使用。

ElMessageBox 确定时按钮触发加 loading

LRF200307的博客

07-12

767

场景：ElMessageBox 在确定时需要调用方法，这时候需要等方法结束再关闭弹窗时就可以使用啦。

【elementplus】给确认提示框的确认按钮增加加载状态的写法

bbt953的博客

08-19

955

给确认提示框的确认按钮增加加载状态

vue3封装ElMessageBox.confirm（确认框），避免提示信息重复写代码。

choorn的博客

05-06

8135

Promise对象可以在成功或失败时分别执行两个回调函数，我们写好这两个函数传递给封装的代码，在相应位置调用这两个函数即可。确认框是一个Promise对象，与axios属于同种，我觉得所有Promise类的对象封装都可以参考此方法（有待验证）。

antd中的message.loading

m0_67403240的博客

03-19

2842

antd中的message.loading 今儿遇到一个需求问题，在table中的操作栏点击删除，由于是向后端发起请求，所以需要一个loading效果，loading又是使用的antd中的message.loading（）。如下是antd中提供的写法 import { message, Button } from 'antd'; const success = () => { message .loading('Action in progress..', 2.5) .then

vue+Ts+element组件封装

VX_WJ88950106的博客

08-08

234

#Typora快捷键#Vue 公用组件使用说明对element-ui 中 form表单的二次封装支持如下模块下面的代码封装支持栅格布局 -普通常规布局 MyForm表单传参参数说明类型可选值默认值 refName 主键的ref名称 string - editForm size 表单组件大小 string medium(中) / small (小)/ mini(超小) medium(中) inline 表单是否换行 boolean - false labelWidt

使用await 方式控制ElMessageBox.confirm等弹窗确认简洁代码调用流程控制

oMangGuoBuDing1的专栏

07-26

631

then(() => {}).catch(() => {}写重复大段的代码控制，现有了简洁理想的控制方式，因为 ElMessageBox.confirm的返回值是一个promise,通过await 然后阻塞等待然后接受确认后的返回值，根据内部return的true false返回，决定是否执行后面的代码块逻辑。

element-ui 实现加载效果

liudachu的博客

10-10

1857

路由钩子或者api请求的时候加一下 <template> <el-table v-loading="loading" :data="emps" stripe style="width: 100%"> <el-table-column prop="eid" label="员工编号"

vue-cli 中使用element的Loading、MessageBox组件问题

hy3528的博客

12-13

1478

import { Message, Loading, MessageBox } from 'element-ui'; 引入时需要重定向 Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt =

弹窗组件封装：原生js封装toast 、二次封装element $confirm

落花生

12-11

916

/** * 自定义toast弹窗 * @param {*} value * @param {*} type text\fail\success 默认不传使用 text * @param {*} duration 持续时间 */ static _toast (value,type,duration=3000){ // 唯一id标识 let uniqueIds = 'poemTast_' + parseInt(Math.random() * 1000)...

使用El-MessageBox，创建一个弹窗点击“确定”、“取消”，实现消息提醒，点击“确定”后并执行API调用的公共方法

CjiangN的博客

06-25

834

使用El-MessageBox，创建一个弹窗点击“确定”、“取消”，实现消息提醒，点击“确定”后并执行API调用的公共方法

ElMessage与ElLoading等样式问题

记录学习前端的历程

07-01

314

vite.config.ts配置。方式1 引入所有样式。方式2 引入组件样式。

Element Loading的全局使用方法(自定义Loading)

m0_61476911的博客

07-21

1826

this.$loading的使用方法

elementUI的loading效果——防止用户在页面运算时乱点

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

11-02

2059

组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/loading#optionselementUI的loading官网文档，这里我着重使用Loading.service(options);方法具体使用方法：第一步：引入loading // ?引入elementUI的loading效果，用于防止图片处理过慢，用户乱点 import { Loading } from 'element-ui' 第二步：在需要loading的地方调用

vue element UI message消息提示添加按钮和点击事件

06-03

要在 Element UI 的 message 消息提示中添加按钮和点击事件，可以使用 Element UI 提供的 $message 方法，同时传入一个配置对象来实现。以下是一个示例代码，创建一个带有按钮和点击事件的消息提示： ``` this.$message({ message: '这是一条带有按钮和点击事件的消息', duration: 0, showClose: true, center: true, customClass: 'message-box', type: 'warning', offset: 100, dangerouslyUseHTMLString: true, iconClass: 'el-icon-warning', customClass: 'message-box', showCancelButton: true, cancelButtonText: '取消', confirmButtonText: '确定', callback: action => { if (action === 'confirm') { // 点击确定按钮 console.log('点击了确定按钮') } else if (action === 'cancel') { // 点击取消按钮 console.log('点击了取消按钮') } } }) ``` 在这个示例中，我们使用了 Element UI 的 $message 方法来创建一个消息提示，同时传入一个配置对象。其中，我们设置了以下几个配置项： - `message`：消息提示的内容。 - `duration`：消息提示的持续时间。这里设置为 0，表示该消息提示不会自动关闭，需要点击按钮才能关闭。 - `showClose`：是否显示关闭按钮。这里设置为 true，表示该消息提示会显示一个关闭按钮。 - `center`：是否居中显示。这里设置为 true，表示该消息提示会在屏幕中央显示。 - `customClass`：自定义样式类名。这里设置为 message-box，表示该消息提示会应用一个名为 message-box 的样式。 - `type`：消息提示的类型。这里设置为 warning，表示该消息提示是一个警告类型。 - `offset`：消息提示的偏移量。这里设置为 100，表示该消息提示会在垂直方向上向下偏移 100 像素。 - `dangerouslyUseHTMLString`：是否将 message 字段作为 HTML 片段处理。这里设置为 true，表示 message 字段可以包含 HTML 标签。 - `iconClass`：自定义图标类名。这里设置为 el-icon-warning，表示该消息提示会使用一个名为 el-icon-warning 的图标。 - `showCancelButton`：是否显示取消按钮。这里设置为 true，表示该消息提示会显示一个取消按钮。 - `cancelButtonText`：取消按钮的文本。这里设置为取消。 - `confirmButtonText`：确定按钮的文本。这里设置为确定。 - `callback`：按钮点击后的回调函数。该函数会接收一个参数 action，表示用户点击的按钮。如果 action 等于 confirm，表示用户点击了确定按钮；如果 action 等于 cancel，表示用户点击了取消按钮。在回调函数中，我们可以根据用户点击的按钮执行相应的操作。在这个示例中，我们只是简单地在控制台输出了一条消息。你可以根据自己的需求来编写具体的逻辑。