vue项目中使用mint-ui添加loading

灰太狼 2022-03-10 15:54 366阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

如图，在vue项目中使用mint-ui添加loading图标

## **方法：** ##

1.下载

npm install mint-ui -S

2.在 main.js  引入样式

import 'mint-ui/lib/style.css';

![20190311153950916.png][]

3.在需要vue组件中引入

import { Indicator } from 'mint-ui';

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

调用

Indicator.open({
        	text: '加载中...',
          //文字
        	spinnerType: 'fading-circle',
          //样式
        });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

关闭

Indicator.close();

如有不足，欢迎下方补充

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20220310/c855eb445774429f9b5fd66d00d2a89a.png
[20190311153950916.png]: /images/20220310/e11bddd5a6444480804af1540285c127.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20220310/f2cc2ff1350e4ad5a924e33ea868dc4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: /images/20220310/c02de46fd3bf4b828fe9dc880e3c9b42.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue项目中添加husky

husky 是一个 Git Hook 工具。主要实现提交前 eslint 校验和 commit 信息的规范校验，也可以避免多人合作时代码格式化不统一造成的冲突； 1.安装

小灰灰/ 2023年07月19日 12:24/ 0 赞/ 39 阅读

相关 vue项目中添加lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。官方网址为：https://www.lodashjs.com/ 1，安装Lodas

客官°小女子只卖身不卖艺/ 2023年07月01日 04:27/ 0 赞/ 64 阅读

相关 Vue中mintui的field实现blur和focus事件

[https://blog.csdn.net/ywl570717586/article/details/80535236][https_blog.csdn.net_ywl570

比眉伴天荒/ 2023年02月22日 08:27/ 0 赞/ 95 阅读

相关 vue----整个页面添加loading效果

开启 const loading = this.$loading({ lock: true, full

青旅半醒/ 2023年02月10日 05:18/ 0 赞/ 70 阅读

相关 vue项目中添加cnzz统计

在App.vue中添加： export default { name: 'App', mounted() { //

「爱情、让人受尽委屈。」/ 2023年01月06日 13:00/ 0 赞/ 185 阅读

相关 vue项目添加stylelint

使用vue cli3.x创建一个初始项目代码风格: eslint + prettier 项目中添加stylelint进行css代码规范安装 cnpm i s

秒速五厘米/ 2022年12月04日 15:57/ 0 赞/ 397 阅读

相关 vue 项目中添加水印效果

在项目中有给部分区域或者是整个页面添加水印的需求。加水印其实很简单，它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式，然后将转换后的

今天药忘吃喽~/ 2022年11月02日 11:47/ 0 赞/ 649 阅读

相关 vue项目中使用mint-ui添加loading

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

灰太狼/ 2022年03月10日 15:54/ 0 赞/ 367 阅读

相关 vue项目添加Jquery

vue-cli怎么引入jquery Posted on [2016年8月24日][2016_8_24] By [618插件网][618] 1.npm install

骑猪看日落/ 2021年10月09日 03:32/ 0 赞/ 467 阅读

相关 vue 中封装loading

全局注册 Vue.prototype.myLoading = function () { const loading = this.$loading({

桃扇骨/ 2021年07月26日 02:56/ 0 赞/ 505 阅读