Vue3加载中（Spin）

Vue2加载中（Spin）

可自定义设置以下属性：

是否为加载中状态（spinning），类型：boolean，默认 true
组件大小（size），类型：'small'|'default'|'large'，默认 'default'，可选：small | default | large
描述文案（tip），类型：string，默认 ''
加载指示符（indicator），类型：'dot'|'static-circle'|'dynamic-circle'，默认 'dot'

效果如下图：在线预览

①创建加载中组件Spin.vue：

<script setup lang="ts">
interface Props {spinning?: boolean // 是否为加载中状态size?: 'small'|'default'|'large' // 组件大小，可选 small default largetip?: string // 描述文案indicator?: 'dot'|'static-circle'|'dynamic-circle' // 加载指示符
}
withDefaults(defineProps<Props>(), {spinning: true,size: 'default',tip: '',indicator: 'dot'
})
</script>
<template><div :class="`m-spin-wrap ${size}`"><div class="m-spin" v-show="spinning"><div class="m-spin-box"><div class="m-spin-dot" v-if="indicator==='dot'"><span class="u-dot-item"></span><span class="u-dot-item"></span><span class="u-dot-item"></span><span class="u-dot-item"></span></div><div v-if="indicator==='static-circle'" class="u-spin-circle"></div><div v-if="indicator==='dynamic-circle'" class="m-dynamic-circle"><svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg></div><p class="u-tip" v-show="tip">{{ tip }}</p></div></div><div :class="['m-spin-content', {'m-spin-mask': spinning}]"><slot></slot></div></div>
</template>
<style lang="less" scoped>
.m-spin-wrap {position: relative;height: 100%;width: 100%;
}
.m-spin {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 9;.m-spin-box {text-align: center;line-height: 0;.m-spin-dot {position: relative;display: inline-block;transform: rotate(45deg);-ms-transform: rotate(45deg); /* Internet Explorer */-moz-transform: rotate(45deg); /* Firefox */-webkit-transform: rotate(45deg); /* Safari 和 Chrome */-o-transform: rotate(45deg); /* Opera */animation: loadingDot 1.2s infinite linear;-webkit-animation: loadingDot 1.2s infinite linear;@keyframes loadingDot {100% {transform: rotate(405deg);} // to {transform: rotate(405deg);}}.u-dot-item { // 单个圆点样式position: absolute;background: @themeColor;border-radius: 50%;opacity: .3;animation: spinMove 1s linear infinite alternate;-webkit-animation: spinMove 1s linear infinite alternate;@keyframes spinMove {100% {opacity: 1;}}}.u-dot-item:first-child {top: 0;left: 0;}.u-dot-item:nth-child(2) {top: 0;right: 0;animation-delay: .4s;-webkit-animation-delay: .4s;}.u-dot-item:nth-child(3) {bottom: 0;right: 0;animation-delay: .8s;-webkit-animation-delay: .8s;}.u-dot-item:last-child {bottom: 0;left: 0;animation-delay: 1.2s;-webkit-animation-delay: 1.2s;}}.u-spin-circle {display: inline-block;border-radius: 50%;border-style: solid;border-color: @themeColor;border-top-color: transparent; // 隐藏1/4圆animation: loadingCircle 1s infinite linear;-webkit-animation: loadingCircle 1s infinite linear;@keyframes loadingCircle {100% {transform: rotate(360deg);}}}.m-dynamic-circle {display: inline-block;.circular {display: inline;animation: loading-rotate 2s linear infinite;@keyframes loading-rotate {100% {transform: rotate(360deg);}}.path {stroke-dasharray: 90,150;stroke-dashoffset: 0;stroke-width: 5;stroke: @themeColor;stroke-linecap: round;animation: loading-dash 1.5s ease-in-out infinite;@keyframes loading-dash {0% {stroke-dasharray: 1,200;stroke-dashoffset: 0;}50% {stroke-dasharray: 90,150;stroke-dashoffset: -40px;}100% {stroke-dasharray: 90,150;stroke-dashoffset: -120px;}}}}}.u-tip {color: @themeColor;text-align: center;}}
}
.large {.m-spin .m-spin-box {.m-spin-dot {width: 36px;height: 36px;.u-dot-item {width: 12px;height: 12px;}}.u-spin-circle {width: 40px;height: 40px;border-width: 4px;}.m-dynamic-circle {width: 40px;height: 40px;}.u-tip {font-size: 16px;font-weight: 500;line-height: 20px;margin-top: 14px;}}
}
.default {.m-spin .m-spin-box {.m-spin-dot {width: 28px;height: 28px;.u-dot-item {width: 10px;height: 10px;}}.u-spin-circle {width: 32px;height: 32px;border-width: 3px;}.m-dynamic-circle {width: 32px;height: 32px;}.u-tip {font-size: 14px;font-weight: 500;line-height: 18px;margin-top: 10px;}}
}
.small {.m-spin .m-spin-box {.m-spin-dot {width: 20px;height: 20px;.u-dot-item {width: 8px;height: 8px;}}.u-spin-circle {width: 24px;height: 24px;border-width: 2px;}.m-dynamic-circle {width: 24px;height: 24px;}.u-tip {font-size: 14px;font-weight: 400;line-height: 16px;margin-top: 6px;}}
}
.m-spin-content {transition: opacity .3s;
}
.m-spin-mask {user-select: none;pointer-events: none;opacity: 0.4;
}
</style>

②在要使用的页面引入：

<script setup lang="ts">
import Spin from './Spin.vue'
import { ref } from 'vue'const tip = ref('加载中...')
const spinning = ref(true)
</script>
<template><div><h2 class="mb10">Spin 加载中基本使用</h2><Spin style="width: 800px;" :tip="tip" :spinning="spinning"><p class="spin-content">当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，延迟`delay`ms时间后，显示 loading 效果；如果 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态；如果不设置 tip 描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip 描述文案一起水平垂直居中。</p></Spin><h2 class="mt30 mb10">圆形加载指示符 (indicator: circle)</h2><Spin style="width: 800px;" :tip="tip" :spinning="spinning" indicator="circle"><p class="spin-content">当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，延迟`delay`ms时间后，显示 loading 效果；如果 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态；如果不设置 tip 描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip 描述文案一起水平垂直居中。</p></Spin><h2 class="mt30 mb10">各种大小</h2><Spin :tip="tip" class="u-spin" :spinning="spinning" size="small" /><Spin :tip="tip" class="u-spin" :spinning="spinning" size="default" /><Spin :tip="tip" class="u-spin" :spinning="spinning" size="large" /><Spin :tip="tip" class="u-spin" :spinning="spinning" size="small" indicator="circle" /><Spin :tip="tip" class="u-spin" :spinning="spinning" size="default"  indicator="circle" /><Spin :tip="tip" class="u-spin" :spinning="spinning" size="large"  indicator="circle" /><h3>Loading state: <Switch v-model:checked="spinning" /></h3></div>
</template>
<style lang="less" scoped>
.spin-content {display: inline-block;border: 1px solid #91d5ff;background-color: #e6f7ff;padding: 30px;
}
.u-spin {display: inline-block;width: 100px;height: 100px;
}
</style>

Vue3加载中（Spin）相关推荐

Vue加载中（Spin）
可自定义传入以下属性: 是否为加载中状态(spinning),默认为true 描述文案(tip),默认为空效果图如下: ①创建Spin.vue组件: <template><div ...
vue 一直加载_vue加载中loading提示信息(iView Spin)
场景在一些按钮的点击操作中,假如没有限制,用户多次点击,会向后台发送多次请求. 还有一种情况是:当页面加载时,假如数据没有加载完成,此时为了防止用户进行操作,会显示一个遮罩:加载中....这个操作和 ...
vue3加载动态图片
vue3加载动态图片一.动态加载图片使用new URL(url, import.meta.url) <template><div class="home"&g ...
Nignx集成fastDFS后访问Nginx一直在加载中解决
问题描述: Nginx集成fastDFS后,访问Nginx一直在加载中,得不到页面.查看Nginx的错误日志: 可以看到是fastdfs.conf的配置错误,tracker的ip没有修改: fastd ...
微信小程序在使用wx.request时显示加载中
我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.j ...
ajax的loading方法,Ajax加载中显示loading的方法
使用ajaxStart方法定义一个全局的"加载中..."提示$(function(){ $("#loading").ajaxStart(function(){ ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
activity中fragment 返回键不退出_优雅地处理加载中(loading)，重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...
css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title><meta ...

Vue3加载中（Spin）

Vue3加载中（Spin）相关推荐

最新文章

热门文章