如何實(shí)現(xiàn)vue加載指令 v-loading

更新時(shí)間：2024年01月15日 10:53:59 作者：劫辭

在日常的開發(fā)中,加載效果是非常常見的,但是怎么才能方便的使用,本文介紹如何實(shí)現(xiàn)vue加載指令 v-loading,感興趣的朋友一起看看吧

為什么使用指令實(shí)現(xiàn)

在日常的開發(fā)中，加載效果是非常常見的，但是怎么才能方便的使用，那就還是值得思考一番的，
比如在 vue 中，最簡(jiǎn)單的方式就是封裝為一個(gè)組件了，但是如果封裝為組件的話，在不想注冊(cè)為全局組件的時(shí)候，每次都需要引入、注冊(cè)、使用；如果注冊(cè)為全局組件，你也往往需要分析結(jié)構(gòu)在合適的位置插入組件，貌似使用起來都會(huì)麻煩一點(diǎn)，loading 這種使用頻率高的效果，使用一次麻煩一點(diǎn)，使用100次就會(huì)覺得更加麻煩
而使用指令只需要在需要的位置像使用屬性一樣即可；封裝可以麻煩，但是使用越簡(jiǎn)單越好

具體實(shí)現(xiàn)

封裝準(zhǔn)備

1.首先需要一個(gè) js 文件，因?yàn)橹噶顚?shí)際上就是一個(gè)對(duì)象，通過在不同的鉤子函數(shù)中執(zhí)行對(duì)應(yīng)的邏輯，在本文中，需要使用的鉤子函數(shù)是 inserted 和 update，因此可以寫一個(gè)基礎(chǔ)的結(jié)構(gòu)，如下：

export default {
    inserted(el, binding){
    },
    update(el, binding){
    }
}

2.然后將這個(gè)指令在入口文件 main.js 內(nèi)進(jìn)行全局注冊(cè)，如下：

import vLoading from '你封裝指令js文件的路徑'
// 注冊(cè)指令
Vue.directive('jc-loading', vLoading)

3.創(chuàng)建一個(gè) vue 文件來使用這個(gè)指令，如下：

<template>
	<div class="container">
		<button
			style="margin-bottom: 20px"
			@click="handleClick">
			開關(guān)
		</button>
		<div
			class="box"
			v-jcLoading="isLoading">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, temporibus veniam! Totam temporibus ipsam, atque
			amet aliquid corporis molestiae, perspiciatis asperiores doloremque enim explicabo aperiam. Vel doloremque
			voluptatibus incidunt quae suscipit cupiditate. Obcaecati sunt, consectetur voluptas sequi aliquam omnis, rem non
			molestiae assumenda illum quasi excepturi error voluptatibus pariatur nulla.
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			isLoading: false
		}
	},
	methods: {
		handleClick() {
			this.isLoading = !this.isLoading
		}
	}
}
</script>
<style lang="less" scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.box {
		width: 500px;
		height: 300px;
		padding: 20px;
		border: 1px solid #999;
		color: #f40;
	}
}
</style>

4.查看一下指令內(nèi)的輸出語句是否正常執(zhí)行，如圖：

5.正常進(jìn)行了打印，現(xiàn)在我們進(jìn)行正式的編寫

實(shí)現(xiàn) loading 效果

1.實(shí)現(xiàn)這一步其實(shí)也非常的簡(jiǎn)單，找一個(gè)你覺得好看或者合適的加載效果，按照正常的 html+css+js 進(jìn)行實(shí)現(xiàn)就好，當(dāng)你實(shí)現(xiàn)好之后，需要做的就是使用 js 進(jìn)行動(dòng)態(tài)的創(chuàng)建這些元素，所以我們需要有一個(gè)函數(shù)幫助我們完成這一步，如下：

// 導(dǎo)入模塊化的 less 文件
import styles from './loading.module.less'
// 創(chuàng)建 loading 元素
function createLoading() {
	// 創(chuàng)建 load 遮罩
	const loadingMask = document.createElement('div')
	loadingMask.dataset.role = 'jc-loading'
	loadingMask.classList.add(styles['jc-loading-mask'])
	// 創(chuàng)建 loading 旋轉(zhuǎn)容器元素
	const loadingSpinner = document.createElement('div')
	loadingSpinner.classList.add(styles['jc-loading-spinner'])
	loadingMask.appendChild(loadingSpinner)
	// 創(chuàng)建文本片段
	const fragment = document.createDocumentFragment()
	// 創(chuàng)建子元素進(jìn)行旋轉(zhuǎn)縮放
	for (let i = 0; i < 12; i++) {
		const div = document.createElement('div')
		div.style = `--i:${i}`
		div.classList.add(styles['jc-loading-spinner__circle'])
		fragment.appendChild(div)
	}
	loadingSpinner.appendChild(fragment)
	return loadingMask
}

2.代碼還是非常簡(jiǎn)單的，具體取決于你本身實(shí)現(xiàn)的 loading 效果，我這個(gè)是一個(gè)比較簡(jiǎn)單的動(dòng)效，上面這個(gè)地方如果有疑問那應(yīng)該就是證據(jù)導(dǎo)入語句，在 vue 中，如果希望一個(gè) less 文件作為一個(gè)模塊導(dǎo)入和使用，需要將文件命名改為 文件名.module.less 這種格式，即文件后綴為 .module.less，我們?cè)?inserted 鉤子函數(shù)中打印一下這個(gè)導(dǎo)入的 styles，如下：

export default {
    inserted(el, binding){
        console.log(styles)
    },
    update(el, binding){
    }
}

3.結(jié)果如圖：

4.k 為 less 文件中開發(fā)時(shí)書寫的類名，而后面的 v 表示實(shí)際的類名，本案例中 less 文件代碼如下：

.jc-loading-mask {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
}
.jc-loading-spinner {
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	width: 50px;
	height: 50px;
	animation: sp 4s linear infinite;
}
.jc-loading-spinner__circle {
	position: absolute;
	top: 0;
	left: calc(50% - 3px);
	width: 6px;
	height: 6px;
	transform: rotate(calc(var(--i) * (360deg / 12)));
	transform-origin: center 25px;
}
.jc-loading-spinner__circle::before {
	content: '';
	inset: 0;
	border-radius: 50%;
	position: absolute;
	background-color: #ff6348;
	animation: zoom 2.5s linear infinite;
	animation-delay: calc(var(--i) * 0.2s);
}
@keyframes sp {
	to {
		transform: rotate(360deg);
	}
}
@keyframes zoom {
	0% {
		transform: scale(1.2);
	}
	50% {
		transform: scale(0.5);
	}
	100% {
		transform: scale(1.2);
	}
}

5.這些 css 樣式我就不再贅述了，先不進(jìn)行其他邏輯判斷，只展示到頁面上，看看效果，代碼如下：

export default {
    inserted(el, binding){
      	el.appendChild(createLoading())
    },
    update(el, binding){
    }
}

6.效果如圖：

7.其實(shí)也不難對(duì)吧，這個(gè)效果你可以根據(jù)自己的需求來進(jìn)行更換，但是實(shí)現(xiàn)方法都是可以套用的

loading 顯示與隱藏

1.把這個(gè)需求梳理清楚之后，后面的就呼之欲出了，什么時(shí)候顯示，必然是指令上的值為 true 的時(shí)候，隱藏則相反，這是一個(gè)先決條件

2.在這個(gè)條件之后呢？還需要考慮什么呢？是不是需要?jiǎng)?chuàng)建這個(gè) loading 效果的元素啊，當(dāng)指令的值為 true 且不存在當(dāng)前的 loading 元素的時(shí)候，才需要?jiǎng)?chuàng)建，而指令的值為 false ，則是當(dāng)前的 loading 元素存在的話，就需要移除啊

3.基于上面的條件，我們需要一個(gè)輔助函數(shù)，來幫助我們查找當(dāng)前 loading 效果的元素是否存在，如下：

function getLoading(container) {
	return container.querySelector(`[data-role="jc-loading"]`)
}

4.所以我們?cè)?inserted 鉤子函數(shù)中，應(yīng)該進(jìn)行判斷，當(dāng)指令的值為 true 且元素不存在時(shí)，就創(chuàng)建元素并添加，如下：

inserted(el, binding){
	// 如果為 true 且不存在加載元素就創(chuàng)建元素添加加載效果
	if (!getLoading(el)) {
		const loading = createLoading()
		el.appendChild(loading)
	}
}

5.而 update 函數(shù)中的代碼是不是也可以寫出來了，進(jìn)行條件判斷來執(zhí)行邏輯，而且不難發(fā)現(xiàn)其實(shí)這個(gè)條件與 inserted 中的條件是重合的，所以我們可以封裝為一個(gè)函數(shù)，如下：

// 開啟加載效果
function openLoading(el, binding) {
	// 如果為 false 且存在加載元素就移除加載元素
	if (!binding.value) {
		const dom = getLoading(el)
		dom && dom.remove()
	} else {
		// 如果為 true 且不存在加載元素就創(chuàng)建元素添加加載效果
		if (!getLoading(el)) {
			const loading = createLoading()
			el.appendChild(loading)
		}
	}
}

6.當(dāng)然，還需要考慮當(dāng)前顯示加載元素的 dom 是不是存在相對(duì)定位，如果不存在則改為相對(duì)定位，最后指令對(duì)象的實(shí)際代碼如下：

export default {
    inserted(el, binding){
        // 檢測(cè)綁定的元素的 position 屬性是否為 static
		if (window.getComputedStyle(el).position === 'static') {
			// 如果是則改為相對(duì)定位
			el.style.position = 'relative'
		}
      	openLoading(el, binding)
    },
    update(el, binding){
        openLoading(el, binding)
    }
}

7.我們看一下實(shí)際的效果，如圖：

使用修飾符擴(kuò)展

1.通過 modifiers(修飾符) 進(jìn)行一個(gè)擴(kuò)展，當(dāng)指令了添加了修飾符 body 的時(shí)候，loading 就會(huì)插入到 body 里面，填充 body，所以我們還需要進(jìn)行一些額外的判斷，如下：

function getContainer(el, binding) {
	return binding.modifiers.body ? document.body : el
}
export default {
	inserted(el, binding) {
		if (window.getComputedStyle(el).position === 'static') {
			el.style.position = 'relative'
		}
		openLoading(getContainer(el, binding), binding)
	},
	update(el, binding) {
		openLoading(getContainer(el, binding), binding)
	}
}

2.此時(shí)在組件中使用添加修飾符 body 即可，如下：

<!-- 添加修飾符.body -->
<div class="box" v-jcLoading.body="isLoading">
...
</div>

3.查看效果，如圖：

4.元素實(shí)際插入的位置，如圖：

完整代碼與結(jié)語

1.現(xiàn)在已經(jīng)具備了一個(gè) loading 指令基本的效果，如果還需要進(jìn)行其他擴(kuò)展，比如傳遞給 loading 指令的值不是一個(gè)單純的布爾值，而是一個(gè)對(duì)象，如下：

{ loading：true, color: 'blue', text: '拼命加載中...' ... }

2.通過這些配置來增強(qiáng)指令的效果，有興趣的可以自己試試

3.完整指令代碼：

import styles from './loading.module.less'
function getLoading(container) {
	return container.querySelector(`[data-role="jc-loading"]`)
}
function createLoading() {
	const loadingMask = document.createElement('div')
	loadingMask.dataset.role = 'jc-loading'
	loadingMask.classList.add(styles['jc-loading-mask'])
	const loadingSpinner = document.createElement('div')
	loadingSpinner.classList.add(styles['jc-loading-spinner'])
	loadingMask.appendChild(loadingSpinner)
	const fragment = document.createDocumentFragment()
	for (let i = 0; i < 12; i++) {
		const div = document.createElement('div')
		div.style = `--i:${i}`
		div.classList.add(styles['jc-loading-spinner__circle'])
		fragment.appendChild(div)
	}
	loadingSpinner.appendChild(fragment)
	return loadingMask
}
function openLoading(el, binding) {
	if (!binding.value) {
		const dom = getLoading(el)
		dom && dom.remove()
	} else {
		if (!getLoading(el)) {
			const loading = createLoading()
			el.appendChild(loading)
		}
	}
}
function getContainer(el, binding) {
	return binding.modifiers.body ? document.body : el
}
export default {
	inserted(el, binding) {
		if (window.getComputedStyle(el).position === 'static') {
			el.style.position = 'relative'
		}
		openLoading(getContainer(el, binding), binding)
	},
	update(el, binding) {
		openLoading(getContainer(el, binding), binding)
	}
}

4.less 樣式代碼：

.jc-loading-mask {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
}
.jc-loading-spinner {
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	width: 50px;
	height: 50px;
	animation: sp 4s linear infinite;
}
.jc-loading-spinner__circle {
	position: absolute;
	top: 0;
	left: calc(50% - 3px);
	width: 6px;
	height: 6px;
	transform: rotate(calc(var(--i) * (360deg / 12)));
	transform-origin: center 25px;
}
.jc-loading-spinner__circle::before {
	content: '';
	inset: 0;
	border-radius: 50%;
	position: absolute;
	background-color: #ff6348;
	animation: zoom 2.5s linear infinite;
	animation-delay: calc(var(--i) * 0.2s);
}
@keyframes sp {
	to {
		transform: rotate(360deg);
	}
}
@keyframes zoom {
	0% {
		transform: scale(1.2);
	}
	50% {
		transform: scale(0.5);
	}
	100% {
		transform: scale(1.2);
	}
}

到此這篇關(guān)于如何實(shí)現(xiàn)vue加載指令 v-loading的文章就介紹到這了,更多相關(guān)vue加載指令 v-loading內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: