营销型设计网站,网站建设佰首选金手指三,福田欧辉官网,怎么做刷业网站前言
在开发的过程中#xff0c;点击提交按钮#xff0c;或者是一些其它场景总会遇到Loading加载框#xff0c;PC的一些UI库也没有这样的加载框#xff0c;无法满足业务需求#xff0c;因此可以自己自定义一个#xff0c;实现过程如下。 效果图 如何封装#xff1f;
第…前言
在开发的过程中点击提交按钮或者是一些其它场景总会遇到Loading加载框PC的一些UI库也没有这样的加载框无法满足业务需求因此可以自己自定义一个实现过程如下。 效果图 如何封装
第1步创建要封装成全局组件的文件 templatediv classloadingv-showmsg.showdiv classload-box!-- 图片放在文末自行右键另存为 --img src/assets/common/load.pngspan{{ msg.title }}/span/div/div
/templatescript
export default {name: SelfLoading,props: {msg: {type: Object,default: () ({show: false,title: 加载中...})}},methods: {// 显示loading的方法show (title 加载中...) {this.msg.show truethis.msg.title title},// 隐藏loading的方法hide () {this.msg.show false}}
}
/scriptstyle langscss scoped
.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 9999;.load-box {background-color: rgba(0, 0, 0, 0.5);width: 100px;height: 100px;border-radius: 5px;box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.5);color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;letter-spacing: 0.8px;font-size: 13px;img {width: 30px;margin-bottom: 8px;animation: rotate 0.8s linear infinite;}}
}keyframes rotate {to {transform: rotate(360deg);}
}
/style 第2步注册组件
Loading这类的通用组件一般定义为全局组件那么直接在main.js文件中全局注册。
import SelfLoading from /components/Loading
Vue.component(SelfLoading, SelfLoading) 第3步使用组件
template!-- 全局Loading --self-loading refloadingRef /
/templatescript
export default {// 仅做示例created () {// 开启全局Loading不传参默认为 加载中...this.$refs.loadingRef.show(上传中...)},// 仅做示例beforeDestroy () {// 隐藏全局Loadingthis.$refs.loadingRef.hide()}
}
/script 图片在这里
图片右击另存为即可好像会有CSDN自动添加的水印不太知道怎么去除需要原图的可以在评论区留下你的邮箱地址。
