vue封装一个简单的loading组件

效果图:

vue封装一个简单的loading组件_第1张图片

1、首先创建一个loading组件;

loading.vue





在这个组件中内层设置了两个div,loading_rotate是滚动的loading加载,loading_hide是隐藏loading的遮罩层,目的只为让loading_rotate显示滚动条;在props中接收两个参数,loading控制是否显示,message显示的文字;

2、在app.vue引入







在app.vue中我们引入了Loading组件,并在data中设置了初始值;定义了一个get请求接口,在请求时显示Loading组件 ,请求成功后隐藏Loading,并把响应的结果展示到页面中

vue封装一个简单的loading组件_第2张图片

vue封装一个简单的loading组件_第3张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)