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

最新推荐文章于 2024-06-25 09:46:41 发布
最新推荐文章于 2024-06-25 09:46:41 发布
阅读量3.3k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17108919/article/details/109530861
版权
封装代码export function nConfirm (msg) { msg = msg || '确认消息' return new Promise((resolve, reject) => { this.$confirm(msg + '', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then((res) => {
摘要由CSDN通过智能技术生成

封装代码

export function nConfirm (msg) {
   
  msg = msg || '确认消息'
  return new Promise((resolve, reject) => {
   
    this.$confirm(msg + '', '提示', {
   
      confirmButtonText:
最低0.47元/天 解锁文章
autm许
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui 二次封装系列- button(二)
sky2714的博客
01-11 733
看此篇前,请阅读上一篇https://blog.csdn.net/sky2714/article/details/112494719 在上一篇中, 我们用一个简单的 autoLoading属性 二次封装了el-button得到了pl-button组件,本篇中,我们继续丰富pl-button组件. 和自动loading相似,我们经常会有点击按钮需要弹窗二次确认的情况,如:点击删除按钮时,我们需要使用messageBox组件进行二次确认 this.$confirm('此操作将永久删除该文件, 是否继续?',
基于ElementUI二次封装弹窗组件
qq_42696432的博客
12-29 1572
组件封装是一个很常规的操作。随着时间的积累，组件也会越来越多，配合vuepress可以解决组件文档的统一化，但依然解决不了组件的跨项目复用问题。一个公司中不可能只基于一个框架或项目开发，不同的业务或模块会另起项目，这时，如果是把项目的复用组件通过复制的方式引入另一项目，就显得麻烦，而且如果组件升级或修复bug，不能实时同步。 如何解决组件的跨项目复用，是每个团队都会面临的问题。就常见的就是把组件上传到npm仓库，这样不同的项目需要时直接从npm仓库中安装使用，如果组件升级或修复问题，其他项目同步更新就可以。
使用El-MessageBox，创建一个弹窗 点击“确定”、“取消”，实现消息提醒，点击“确定”后并执行API调用的公共方法
最新发布
CjiangN的博客
06-25 381
使用El-MessageBox，创建一个弹窗 点击“确定”、“取消”，实现消息提醒，点击“确定”后并执行API调用的公共方法
vue3中消息提示，确认框的封装：Message，MessageBox
qq_28813031的博客
09-24 5030
文件夹：msgBox.ts /** * 时间：2020/11/20 * Created by dingwangjun on * 说明：消息 */ import { ElNotification, ElMessage,ElMessageBox } from 'element-plus' /** * 如何调用，如下面调用案例 * import {succesMsg,warnMsg,infoMsg, errorMsg,alertBox,confirmBox} from '@/ut...
基于axios 的二次封装
qq_37550440的博客
06-28 801
axios的二次封装 请求拦截里面针对 token 进行处理 响应拦截里面判断 token 是否过期等等
Vue 基于element-ui 封装的一个各种消息提示的全局组件
weixin_46212682的博客
09-18 770
Vue 基于element-ui 封装的一个各种消息提示的全局组件
vue封装axios、element-ui消息提示、element-plus消息提示
qq_36583300的博客
04-16 3779
1、axios封装 //引入axios import axios from 'axios' //引入登录拦截 import store, {TOKEN_HEADER} from "../store"; //引入路由 import router from "../router"; //引入定义链接 import {reUrl, path} from './urls' //引入qs import qs from 'qs' import { // eslint-disable-next-line no-
element 消息的封装
qq_34114535的博客
07-26 122
【代码】element 消息的封装。
给elementUI中的 this.$confirm 添加按钮的加载效果
Dcripple的博客
05-13 6393
给element-UI的 $confirm 弹窗中的按钮添加 loading 加载效果
vue+element+axios 通过拦截器实现的全局loading加载动画
dearyang
05-11 1820
/* * Copyright © 2019-2020 LiuDanYang/LiJia. All rights Reserved. */ import axios from "axios"; import { MessageBox, Message, Loading } from "element-ui"; import store from "@/store"; import { get...
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...
RabbitMQ消息模式之Confirm确认消息
01-07
理解Confirm消息确认机制 消息的确认，是指生产者投递消息后，如果Broker收到消息，则会给我们生产者一个应答。生产者进行接收应答，用来确定这条消息是否正常的发送到Broker，这种方式也是消息的可靠性投递的核心...
jquery插件jquery.confirm弹出确认消息
10-23
介绍了插件jquery.confirm弹出确认消息的实现方法，感兴趣的小伙伴们可以参考一下
element中的$confirm的使用
11-21
这个对话框常用于用户需要进行重要操作前的二次确认，如删除、修改等。在提供的代码片段中，我们看到一个自定义函数 `confirm` 对 `$confirm` 进行了封装，以便于在项目中更方便地调用。 1. **封装`confirm`函数**...
vue之push() pop() shift() unshift() splice() sort() reverse()等等
qq_17108919的博客
09-16 7901
变更方法 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 let arr = ['a', 'b', 'c', 'd'] console.log(arr) // ["a", "b", "c", "d"] console.log(arr.push('new')) //6 console.log(arr) // ["a", "b", "c", "d", "new"] pop() 方法数组最后一位元素删除并返回数组
uni-app如何设置favicon.icon图标
qq_17108919的博客
09-25 4862
1.创建一个.html文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" href="static/images/log.png"> &
jq 工作中常用代码封装之----ajax封装路由
qq_17108919的博客
07-17 4436
路由封装 api = function (params) { return new Promise((resolve, reject) => { $.ajax({ url: params.url, //路由 data: params.data || '', // 传参 type: params.type ? params.type : 'post', // 发送方式，不传默认post success: function (res) {
vscode 如何格式化vue(template)html代码 , 保持标签属性不换行
qq_17108919的博客
11-27 2534
百度看了好多文章，但是设置完了，还是会换行 今天终于自己摸索出来不会换行 1.vscode->文件->首选项->设置 2.选择工作区->找到settings.json(滚动找到settings.json) 3.设置如下，就ok了 "settings": { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions":{ "js-bea
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，表示用户点击了取消按钮。 在回调函数中，我们可以根据用户点击的按钮执行相应的操作。在这个示例中，我们只是简单地在控制台输出了一条消息。你可以根据自己的需求来编写具体的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值