关闭

element-ui 给页面上的DOM元素加loading效果

1461人阅读 评论(0) 收藏 举报
分类:

一般element-ui都是给表格加loading效果,也可以给整个页面(body)加loading效果。

当然也可以页面上的任何DOM加loading效果。

在查询button的标签上添加onSearch方法。

<el-button  type="primary"  @click="onSearch">查询</el-button>
onSearch() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)',
      target: document.querySelector('.div1')
    });
    setTimeout(() => {
      loading.close();
    }, 2000);
}

也有取消loading效果的方法

loading.close()
0
0
查看评论

ElementUI案例演示:导航、布局、加载动画

知识点1.vue-router之嵌套路由 http://router.vuejs.org/zh-cn/essentials/nested-routes.html 2.element-ui 导航组件、布局组件、加载动画 http://element.eleme.io/#/zh-CN/compo...
  • github_26672553
  • github_26672553
  • 2016-12-08 14:02
  • 68606

weui loading效果实现

界面 --> ...
  • Honey_Potter
  • Honey_Potter
  • 2016-11-24 10:19
  • 6379

【工作日志】elementUI学习-Layout布局

Layout布局1.创建布局通过Col组件的:span属性调整Layout布局,分为24栏。el-row> <el-col :span="24"><div class="grid-content bg-purple-dark">...
  • FelixJiaWork
  • FelixJiaWork
  • 2017-03-13 16:24
  • 13909

JS实现页面加载完毕之前loading提示效果

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidt...
  • haibo0668
  • haibo0668
  • 2016-10-28 12:04
  • 22225

vue.js+Element 增删改查

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里...
  • janessssss
  • janessssss
  • 2016-11-22 16:48
  • 17111

vue.js导入css库(elementUi)的方法

1.安装以下模块,让webpack可以解析css文件cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev2.安装elementUi模块cn...
  • xiejunna
  • xiejunna
  • 2017-01-22 17:03
  • 10045

ElementUI案例演示:导航、布局、加载动画

1
  • gebitan505
  • gebitan505
  • 2017-03-01 14:53
  • 3241

分享一个VUE Element-UI 的多级菜单动态渲染的组件

以下是组件代码: <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"...
  • goodsave
  • goodsave
  • 2017-12-23 14:36
  • 1553

Vue中使用ElementUI使用第三方图标库iconfont

1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx,xxx自定义然后,将项目下载自本地 3.将这5个文件放入到项目文件中,将iconfont.css引入到Vue项目中, 然后修改iconf...
  • qq_15646957
  • qq_15646957
  • 2017-09-07 21:35
  • 10752

element ui 加载过度效果

例如给table加加载效果 <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px;" v-loading="loa...
  • github_37847992
  • github_37847992
  • 2017-09-21 10:43
  • 304
    个人资料
    • 访问:20604次
    • 积分:682
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:0篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论