8月總票房已突破10億！《封神》第一：口碑已經(jīng)成了
8月5日消息，據(jù)燈塔專業(yè)版數(shù)據(jù)，截至8月5日9時35分，8月總票房（含預(yù)售）已突破10億。其中，《封神》以大比分的優(yōu)勢領(lǐng)先。根據(jù)官方消息，目前該片總票房已經(jīng)超過14.
大家好，我是大澈！
本文約3100+字，整篇閱讀大約需要5分鐘。
本文主要內(nèi)容分三部分，第一部分是需求分析，第二部分是實現(xiàn)步驟，第三部分是問題詳解。
如果您只需要解決問題，請閱讀第一、二部分即可。
如果您有更多時間，進一步學(xué)習(xí)問題相關(guān)知識點，請閱讀至第三部分。
實現(xiàn)級聯(lián)菜單效果，點擊一級菜單某一項，就會加載出對應(yīng)的二級菜單內(nèi)容，點擊二級菜單某一項，就會加載出對應(yīng)的三級菜單內(nèi)容，以此類推，最后一級為五級菜單。
對于加載而言，必須是懶加載效果，即點擊菜單某一項時，才會真正去請求加載對應(yīng)的下一級菜單內(nèi)容。
對于菜單最后一級內(nèi)容，要插入一個輸入框，在輸入框內(nèi)，用戶可以任意輸入版本號，并且要求輸入框不可被選中。
當(dāng)然，我們的正題是數(shù)據(jù)的懶加載，級聯(lián)菜單中插入不可被選中的輸入框?qū)崿F(xiàn)算是附加內(nèi)容了。
在項目中，我們使用數(shù)據(jù)的懶加載，會有如下好處：
了解了這些好處之后，再就是要了解數(shù)據(jù)懶加載的應(yīng)用場景。
這部分比較有用，所以多敘述一些。
數(shù)據(jù)懶加載在以下場景中特別有用：
上述場景在此部分只做簡單描述，如果你有空余時間，各個場景具體代碼實例請見第三部分總結(jié)。
我們這次的需求實現(xiàn)，就是符合第1條場景。
當(dāng)選中某一級時，動態(tài)加載該級下的選項。
通過lazy開啟動態(tài)加載，并通過lazyload方法來設(shè)置加載數(shù)據(jù)源。
模板代碼：
<template><!-- 級聯(lián)面板 --><el-cascader-panel :props="props"></el-cascader-panel></template>邏輯代碼：
<script setup>// 級聯(lián)面板配置項const props = reactive({// 開啟懶加載lazy: true,// 懶加載加載數(shù)據(jù)源方法async lazyLoad(node, resolve) {const { level } = node;// 已經(jīng)有數(shù)據(jù)了，不需要重復(fù)請求了if (node.children && node.children.length > 0) return;// 模擬掉接口setTimeout(() => {let result;switch (level) {case 0: // 一級目錄result = [{value: "0",label: "行內(nèi)轉(zhuǎn)賬-手機號",children: []},{value: "1",label: "行內(nèi)轉(zhuǎn)賬-銀行賬號",children: []},{value: "2",label: "匯款到當(dāng)?shù)劂y行",children: []},{value: "3",label: "匯款到錢包",children: []},{value: "4",label: "轉(zhuǎn)賬到CUPD",children: []}];break;case 1: //二級目錄// 省略此處代碼...break;case 2: //三級目錄// 省略此處代碼...break;case 3: //四級目錄// 省略此處代碼...break;case 4: // 五級目錄result = [{value: "最低系統(tǒng)版本",label: "最低系統(tǒng)版本要求"},{value: "0",label: "不啟用"},{value: "1",label: "內(nèi)測"},{value: "2",label: "上線"}];// 設(shè)置五級菜單為葉子節(jié)點，無子節(jié)點result.forEach((item) => {item.leaf = level >= 4;});break;default:result = [];break;}resolve(result);}, 1000);}});</script>通過插槽和條件判斷，在級聯(lián)面板中插入輸入框，其中data.label為節(jié)點對象的名稱。
通過@click.stop阻止事件冒泡、寬度為父元素的100%、以及清除級聯(lián)面板組件一些默認(rèn)樣式，實現(xiàn)了輸入框不可被選中的效果。
模版代碼：
<template><!-- 級聯(lián)面板 --><el-cascader-panel :props="props"><template #default="{ data }"><!-- 輸入框節(jié)點對象 --><div v-if="data.label == '最低系統(tǒng)版本要求'" @click.stop style="width: 100%"><div>{{ data.label }}</div><div class="searchText"><el-input v-model="searchText" :placeholder="'最低系統(tǒng)版本要求'"></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>
長列表或分頁數(shù)據(jù)懶加載：
<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;// 模擬異步加載數(shù)據(jù)setTimeout(() => {const newItems = /* 請求新數(shù)據(jù) */;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(); // 滾動到底部時加載更多數(shù)據(jù)}},},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); // 圖片加載后移除滾動監(jiān)聽}},},beforeDestroy() {window.removeEventListener('scroll', this.handle);},};</script>條件性數(shù)據(jù)懶加載：
<template><div><button @click="showData = true">顯示數(shù)據(jù)</button><div v-if="showData"><!-- 顯示數(shù)據(jù)的組件或內(nèi)容 --></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() 動態(tài)導(dǎo)入語法）：
<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問題：如何實現(xiàn)級聯(lián)菜單的數(shù)據(jù)懶加載？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號