大家好,我是大澈!
本文約3100+字,整篇閱讀大約需要5分鐘。
本文主要內容分三部分,第一部分是需求分析,第二部分是實現步驟,第三部分是問題詳解。
如果您只需要解決問題,請閱讀第一、二部分即可。
如果您有更多時間,進一步學習問題相關知識點,請閱讀至第三部分。
實現級聯菜單效果,點擊一級菜單某一項,就會加載出對應的二級菜單內容,點擊二級菜單某一項,就會加載出對應的三級菜單內容,以此類推,最后一級為五級菜單。
對于加載而言,必須是懶加載效果,即點擊菜單某一項時,才會真正去請求加載對應的下一級菜單內容。
對于菜單最后一級內容,要插入一個輸入框,在輸入框內,用戶可以任意輸入版本號,并且要求輸入框不可被選中。
當然,我們的正題是數據的懶加載,級聯菜單中插入不可被選中的輸入框實現算是附加內容了。
在項目中,我們使用數據的懶加載,會有如下好處:
了解了這些好處之后,再就是要了解數據懶加載的應用場景。
這部分比較有用,所以多敘述一些。
數據懶加載在以下場景中特別有用:
上述場景在此部分只做簡單描述,如果你有空余時間,各個場景具體代碼實例請見第三部分總結。
我們這次的需求實現,就是符合第1條場景。
當選中某一級時,動態加載該級下的選項。
通過lazy開啟動態加載,并通過lazyload方法來設置加載數據源。
模板代碼:
<template><!-- 級聯面板 --><el-cascader-panel :props="props"></el-cascader-panel></template>
邏輯代碼:
<script setup>// 級聯面板配置項const props = reactive({// 開啟懶加載lazy: true,// 懶加載加載數據源方法async lazyLoad(node, resolve) {const { level } = node;// 已經有數據了,不需要重復請求了if (node.children && node.children.length > 0) return;// 模擬掉接口setTimeout(() => {let result;switch (level) {case 0: // 一級目錄result = [{value: "0",label: "行內轉賬-手機號",children: []},{value: "1",label: "行內轉賬-銀行賬號",children: []},{value: "2",label: "匯款到當地銀行",children: []},{value: "3",label: "匯款到錢包",children: []},{value: "4",label: "轉賬到CUPD",children: []}];break;case 1: //二級目錄// 省略此處代碼...break;case 2: //三級目錄// 省略此處代碼...break;case 3: //四級目錄// 省略此處代碼...break;case 4: // 五級目錄result = [{value: "最低系統版本",label: "最低系統版本要求"},{value: "0",label: "不啟用"},{value: "1",label: "內測"},{value: "2",label: "上線"}];// 設置五級菜單為葉子節點,無子節點result.forEach((item) => {item.leaf = level >= 4;});break;default:result = [];break;}resolve(result);}, 1000);}});</script>
通過插槽和條件判斷,在級聯面板中插入輸入框,其中data.label為節點對象的名稱。
通過@click.stop阻止事件冒泡、寬度為父元素的100%、以及清除級聯面板組件一些默認樣式,實現了輸入框不可被選中的效果。
模版代碼:
<template><!-- 級聯面板 --><el-cascader-panel :props="props"><template #default="{ data }"><!-- 輸入框節點對象 --><div v-if="data.label == '最低系統版本要求'" @click.stop style="width: 100%"><div>{{ data.label }}</div><div class="searchText"><el-input v-model="searchText" :placeholder="'最低系統版本要求'"></el-input></div></div><div v-else><div>{{ data.label }}</div></div></template></el-cascader-panel></template>
樣式代碼:
<style lang="scss" scope>.el-cascader-panel.is-bordered {border: none;}.el-cascader-menu:last-child .el-cascader-node:nth-of-type(1):has(.searchText) {margin-bottom: 30px;padding: 0;&:hover,&:focus {background: #fff;}}.el-cascader-menu__list {padding: 20px 0;}</style>
長列表或分頁數據懶加載:
<template><div><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li><li v-if="loading">Loading...</li></ul></div></template><script>export default {data() {return {items: [],loading: false,};},mounted() {this.loadMore(); // 初始加載window.addEventListener('scroll', this.handleScroll);},methods: {loadMore() {this.loading true;// 模擬異步加載數據setTimeout(() => {const newItems = /* 請求新數據 */;this.items = this.items.concat(newItems);this.loading = false;}, 1000);},handleScroll() {const scrollPosition = window.innerHeight + window.pageYOffset;const contentHeight = document.documentElement.scrollHeight;if (scrollPosition >= contentHeight && !this.loading) {this.loadMore(); // 滾動到底部時加載更多數據}},},beforeDestroy() {window.removeEventListener('scroll', this.handleScroll);},};</script>
圖片懶加載:
<template><div><img :src="placeholder" ref="image" style="display: none;"></div></template><script>export {data() {return {placeholder: require('@/assets/placeholder.png'), // 占位圖};},mounted() {window.addEventListener('scroll', this.handleScroll);},methods: {handleScroll() {const imageElement = this.$refs.image;const rect = imageElement.getBoundingClientRect();if (rect.top < window.innerHeight) {const src = /* 獲取圖片真實地址 */;imageElement.src = src; // 加載圖片window.removeEventListener('scroll', this.handleScroll); // 圖片加載后移除滾動監聽}},},beforeDestroy() {window.removeEventListener('scroll', this.handle);},};</script>
條件性數據懶加載:
<template><div><button @click="showData = true">顯示數據</button><div v-if="showData"><!-- 顯示數據的組件或內容 --></div></div></template><script>export default {data() {return {showData: false,};},};</script>
路由懶加載(基于 Vue Router):
const Home = () => import('./components/Home.vue');const About = () => import('./components/About.vue');const Contact = () => import('./components/Contact.vue');const routes = [{ path: '/home', component: Home },{ path: '/about', component: About },{ path: '/contact', component: Contact },];const router = new VueRouter({routes,});
異步加載模塊(基于 import() 動態導入語法):
<template><div><button @click="loadModule">加載模塊</button><div v-if="moduleLoaded"><!-- 顯示已加載的模塊 --></div></div></template><script>export default {data() {return {moduleLoaded: false,};},methods: {loadModule() {import('./path/to/module.js').then((module) => {// 模塊加載成功this.moduleLoaded = true;}).catch((error) => {console.error(error);});},},};</script>
本文鏈接:http://www.www897cc.com/showinfo-26-57846-0.htmlVue3問題:如何實現級聯菜單的數據懶加載?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com