generated from nuxt/nuxt_site
124 lines
2.6 KiB
Vue
124 lines
2.6 KiB
Vue
<template>
|
|
<div class="Load-main">
|
|
<div class="Load-container">
|
|
<div class="Load-box">
|
|
<template v-for="(item,idx) in _loadTxt">
|
|
<span class="Load-txt op0" v-html="item" :style="'--delayTime:'+idx*0.5+'s'"></span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
*
|
|
* Load:
|
|
* @author:黄勇文
|
|
* @example:
|
|
* <Load
|
|
* :loadTxt='这是你要传入的动画文本'
|
|
* :speed='这是你要传入的文本显示时间'
|
|
* :chockTime='这是等待文本隐藏的间隔时间'
|
|
* />
|
|
* */
|
|
|
|
const props = defineProps({
|
|
loadTxt:{
|
|
type:String,
|
|
default:'Aerwen 工具箱'
|
|
},
|
|
speed:{
|
|
type:Number,
|
|
default:150,
|
|
},
|
|
chockTime:{
|
|
type:Number,
|
|
default:2000
|
|
}
|
|
})
|
|
|
|
/**配置项**/
|
|
|
|
/**动画文本**/
|
|
let loadTxt = props.loadTxt || 'Aerwen 工具箱'
|
|
/**动画速度**/
|
|
let speed = props.speed || 150
|
|
/**等待文本隐藏时间**/
|
|
let chockTime = props.chockTime || 2000
|
|
|
|
/**格式优化**/
|
|
let _loadTxt = (()=>{
|
|
let res = [],
|
|
_i = 0
|
|
for (let i = 0; i < loadTxt.length; i++) {
|
|
let item = loadTxt[i]
|
|
let _item = item === ' ' ? ' ' : item
|
|
if(_item === ' '){
|
|
res[_i] += _item
|
|
}else{
|
|
_i = i
|
|
res.push(_item)
|
|
}
|
|
}
|
|
return res
|
|
})()
|
|
|
|
onMounted(()=>{
|
|
document.body.style.overflowY='hidden'
|
|
/**动画显示执行**/
|
|
;(()=>{
|
|
|
|
;[...document.getElementsByClassName('Load-txt')].map((item,idx)=>{
|
|
setTimeout(()=>{
|
|
item.classList.remove('op0')
|
|
},idx*speed)
|
|
})
|
|
})();
|
|
|
|
/**动画隐藏执行**/
|
|
let hideAnimation = (async ()=>{
|
|
/**阻塞动画**/
|
|
await chockAnimation()
|
|
let oTxt = [...document.getElementsByClassName('Load-txt')]
|
|
let b = 0
|
|
await new Promise(r=>{
|
|
for (let i = oTxt.length-1; i >= 0; i--) {
|
|
b+=1
|
|
let item = oTxt[i]
|
|
setTimeout((b)=>{
|
|
item.classList.add('op0')
|
|
if(b===oTxt.length){
|
|
r(true)
|
|
}
|
|
},b*speed,b)
|
|
}
|
|
})
|
|
/**显示页面**/
|
|
await new Promise(r=>{
|
|
setTimeout(()=>{
|
|
r(true)
|
|
},1000)
|
|
})
|
|
;(()=>{
|
|
document.getElementsByClassName('Load-box')[0].style.background = 'rgba(255,255,255,0)'
|
|
setTimeout(()=>{
|
|
document.getElementsByClassName('Load-box')[0].style.display = 'none'
|
|
document.body.style.overflowY='auto'
|
|
},400)
|
|
})()
|
|
})();
|
|
|
|
|
|
function chockAnimation(){
|
|
return new Promise(r=>{
|
|
setTimeout(()=>{
|
|
r(true)
|
|
},chockTime)
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/Load/index.scss"></style>
|
|
<style scoped src="~/assets/css/Load/media.scss"></style> |