vue对提示框的封装

以你之姓@ 2022-11-29 13:13 177阅读 0赞

使用Modal Message 方法如下

const root = process.env.VUE_APP_URL;
    import axios from "axios";
    import { Modal,Message } from "view-design";
    
     deleteRow(url, ids) {
        return new Promise((resolve, reject) => {
          Modal.confirm({
            title: "删除提示",
            content: "确认删除当前数据吗？",
            loading: true,
            onOk: () => {
              axios
                .post(root + url, {
                  ids: ids,
                })
                .then((res) => {
                  Modal.remove();
                  resolve(res);
                })
                .catch((err) => {
                  Modal.remove();
                  Message.error('删除失败')
                  reject(err);
                });
            },
          });
        });
      },

LoadingBar 加载进度条

const root = process.env.VUE_APP_URL;
    import axios from "axios";
    import Vue from "vue";
    import ViewUI from 'view-design';
    Vue.use(ViewUI);
    
    filesUpload(files) {
        return new Promise((resolve, reject) => {
          ViewUI.LoadingBar.start();
          axios
            .post(root + "/files/upload", files, {
              headers: {
                "Content-Type": "multipart/form-data;",
              },
            })
            .then((res) => {
              ViewUI.LoadingBar.finish();
              resolve(res);
            })
            .catch((err) => {
              ViewUI.LoadingBar.finish();
              Message.error('上传失败')
              reject(err);
            });
        });
    
    ``

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue提示框组件vue-notification使用实例演示

先看下演示效果： ![请添加图片描述][5a25f0d8ea2447f0bd2ea272a8e8cec1.gif] 安装方法：通过 `npm install vu

雨点打透心脏的1/2处/ 2024年03月25日 21:11/ 0 赞/ 53 阅读

相关前端(vue)提示框显示不全

问题效果如下： ![405e5327a8d642a2b8fc44459cc52e78.png][] 解决过程：最开始以为是提示被挡住了，于是查看了下元素（如下图操作），发现

你的名字/ 2024年03月16日 19:04/ 0 赞/ 115 阅读

相关 vue封装弹出框组件

[https://www.jb51.net/article/173269.htm][https_www.jb51.net_article_173269.htm] [http

爱被打了一巴掌/ 2023年06月28日 06:12/ 0 赞/ 31 阅读

相关 vue中 input输入框的封装

在vue中会将常用的组件进行封装，如下是input输入框的一个封装。 <template> <div class="text_group">

﹏ヽ暗。殇╰゛Y/ 2023年02月17日 06:24/ 0 赞/ 157 阅读

相关 vue对提示框的封装

使用Modal Message 方法如下 const root = process.env.VUE_APP_URL; import axios from "a

以你之姓@/ 2022年11月29日 13:13/ 0 赞/ 178 阅读

相关 vue封装复选框组件

前言 > 根据[百度前端技术学院2018 MVVM 学院][2018 MVVM] 中的[ 2.5 表单实现Input、Checkbox组件][2.5 _Input_Che

╰+攻爆jí腚メ/ 2022年01月31日 15:27/ 0 赞/ 840 阅读

相关 vue - 搜索框组件的封装及使用

在写一个项目的时候，我们在多个页面会使用到搜索功能，这时我们一般都会选择直接写一个组件给多个页面一起使用，下面我给大家分享一下我的组件封装，如果不妥之处，请多多指教！

青旅半醒/ 2021年09月30日 14:22/ 0 赞/ 1107 阅读

相关 vue + element-input封装数字框

因业务需要，要求一个数字框，现有的element的input不太符合要求，遂动手封装了一个，封装后仍能调用原<el-input>事件。功能：仅能输入合法整数和小数格式，默认

川长思鸟来/ 2021年09月25日 02:34/ 0 赞/ 276 阅读

相关 vue -提示框组件的封装

1、效果图： ![在这里插入图片描述][20190902153727819.png] 2、子组件的封装 <template> <div cla

旧城等待，/ 2021年08月13日 22:50/ 0 赞/ 567 阅读

相关继续对dwz封装树形下拉框

前言：之前写了一篇dwz的树形下拉框组件，只能满足单页面的使用，但是面对实际应用时，以上应用暂时不能满足，于是乎又重新对树形菜单进行改造。 ![74473faa-e315-

系统管理员/ 2021年05月10日 11:18/ 0 赞/ 478 阅读