网站备案接入商,深圳精品网站建设,深圳福田口岸,zero的大型网站seo教程效果如下图#xff1a;在线预览 APIs
LoadingBar
参数说明类型默认值必传containerClass加载条容器的类名stringundefinedfalsecontainerStyle加载条容器的样式CSSProperties{}falseloadingBarSize加载条大小#xff0c;单位 pxnumber2falsecolorLoading加载中颜色string‘…效果如下图在线预览 APIs
LoadingBar
参数说明类型默认值必传containerClass加载条容器的类名stringundefinedfalsecontainerStyle加载条容器的样式CSSProperties{}falseloadingBarSize加载条大小单位 pxnumber2falsecolorLoading加载中颜色string‘#1677ff’falsecolorFinish加载完成颜色string‘#1677ff’falsecolorError加载错误颜色string‘#ff4d4f’falseto加载条的挂载位置可选元素标签名例如 body或者元素本身string | HTMLElement‘body’false
Methods
名称说明类型start开始加载的回调函数(from 0, to 80) voidfinish结束加载的回调函数() voiderror出现错误的回调函数() void
创建加载条组件LoadingBar.vue
script setup langts
import { ref, nextTick } from vue
import type { CSSProperties } from vue
interface Props {containerClass?: string // 加载条容器的类名containerStyle?: CSSProperties // 加载条容器的样式loadingBarSize?: number // 加载条大小单位 pxcolorLoading?: string // 加载中颜色colorFinish?: string // 加载完成颜色colorError?: string // 加载错误颜色to?: string | HTMLElement // 加载条的挂载位置可选元素标签名例如 body或者元素本身
}
withDefaults(definePropsProps(), {containerClass: undefined,containerStyle: () ({}),loadingBarSize: 2,colorLoading: #1677ff,colorFinish: #1677ff,colorError: #ff4d4f,to: body
})
const showLoadingBar ref(false)
const loadingBarRef ref() // 加载条 DOM 引用
const loadingStarted ref(false) // 加载条是否开始
const loadingFinishing ref(false) // 加载条是否完成
const loadingErroring ref(false) // 加载条是否报错
async function init() {showLoadingBar.value falseloadingFinishing.value falseloadingErroring.value false
}
async function start(from 0, to 80, status: starting | error starting) {// 加载条开始加载的回调函数loadingStarted.value trueawait init()if (loadingFinishing.value) {return}showLoadingBar.value trueawait nextTick()if (!loadingBarRef.value) {return}loadingBarRef.value.style.transition none // 禁用过渡loadingBarRef.value.style.maxWidth ${from}%void loadingBarRef.value.offsetWidth // 触发浏览器回流(重排)loadingBarRef.value.className loading-bar loading-bar-${status}loadingBarRef.value.style.transition loadingBarRef.value.style.maxWidth ${to}%
}
async function finish() {// 加载条结束加载的回调函数if (loadingFinishing.value || loadingErroring.value) {return}if (loadingStarted.value) {await nextTick()}loadingFinishing.value trueif (!loadingBarRef.value) {return}loadingBarRef.value.className loading-bar loading-bar-finishingloadingBarRef.value.style.maxWidth 100%void loadingBarRef.value.offsetWidth // 触发浏览器回流(重排)showLoadingBar.value false
}
function error() {// 加载条出现错误的回调函数if (loadingFinishing.value || loadingErroring.value) {return}if (!showLoadingBar.value) {void start(100, 100, error).then(() {loadingErroring.value true})} else {loadingErroring.value trueif (!loadingBarRef.value) {return}loadingBarRef.value.className loading-bar loading-bar-errorloadingBarRef.value.style.maxWidth 100%void loadingBarRef.value.offsetWidthshowLoadingBar.value false}
}
function onAfterEnter() {if (loadingErroring.value) {showLoadingBar.value false}
}
async function onAfterLeave() {await init()
}
defineExpose({start,finish,error
})
/script
templateTeleport :disabled!to :totoTransition namefade-in after-enteronAfterEnter after-leaveonAfterLeavediv v-showshowLoadingBar classm-loading-bar-container :classcontainerClass :stylecontainerStyledivrefloadingBarRefclassloading-bar:style--loading-bar-size: ${loadingBarSize}px; --color-loading: ${colorLoading}; --color-finish: ${colorFinish}; --color-error: ${colorError}; max-width: 100%;/div/div/Transition/Teleport
/template
style langless scoped
.fade-in-enter-active {transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-leave-active {transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-enter-from,
.fade-in-leave-to {opacity: 0;
}
.m-loading-bar-container {z-index: 9999;position: fixed;top: 0;left: 0;right: 0;height: var(--loading-bar-size);.loading-bar {width: 100%;transition:max-width 4s linear,background 0.2s linear;height: var(--loading-bar-size);border-radius: var(--loading-bar-size);}.loading-bar-starting {background: var(--color-loading);}.loading-bar-finishing {background: var(--color-finish);transition:max-width 0.2s linear,background 0.2s linear;}.loading-bar-error {background: var(--color-error);transition:max-width 0.2s linear,background 0.2s linear;}
}
/style其中引入使用了以下组件
Vue3间距SpaceVue3按钮Button
在要使用的页面引入
script setup langts
import LoadingBar from ./LoadingBar.vue
import { ref } from vue
const loadingBar ref()
const disabled ref(true)
const localCardRef ref()
const localLoadingBar ref()
const customLoadingBar ref()
function handleStart() {loadingBar.value.start()disabled.value false
}
function handleFinish() {loadingBar.value.finish()disabled.value true
}
function handleError() {disabled.value trueloadingBar.value.error()
}
/script
templatedivh1{{ $route.name }} {{ $route.meta.title }}/h1h2 classmt30 mb10基本使用/h2SpaceButton typeprimary clickhandleStart开始/ButtonButton :disableddisabled clickhandleFinish结束/ButtonButton typedanger clickhandleError报个错/Button/SpaceLoadingBar refloadingBar /h2 classmt30 mb10局部加载条/h2div classm-container reflocalCardRefSpaceButton typeprimary clicklocalLoadingBar.start()Start/ButtonButton clicklocalLoadingBar.finish()Finish/ButtonButton typedanger clicklocalLoadingBar.error()Error/Button/Space/divLoadingBar reflocalLoadingBar :container-style{ position: absolute } :tolocalCardRef /h2 classmt30 mb10自定义加载条样式/h2SpaceButton typeprimary clickcustomLoadingBar.start()Start/ButtonButton clickcustomLoadingBar.finish()Finish/ButtonButton typedanger clickcustomLoadingBar.error()Error/Button/SpaceLoadingBarrefcustomLoadingBar:loading-bar-size5color-loading#2db7f5color-finish#52c41acolor-errormagenta//div
/template
style langless scoped
.m-container {position: relative;display: flex;align-items: center;height: 200px;padding: 16px 24px;border: 1px solid #d9d9d9;
}
/style
