<template>
<!-- 級(jí)聯(lián)面板 -->
<el-cascader-panel :props="props"></el-cascader-panel>
</template>

<script setup>
// 級(jí)聯(lián)面板配置項(xiàng)
const props = reactive({
// 開(kāi)啟懶加載
lazy: true,
// 懶加載加載數(shù)據(jù)源方法
async lazyLoad(node, resolve) {
const { level } = node;

// 已經(jīng)有數(shù)據(jù)了，不需要重復(fù)請(qǐng)求了
if (node.children && node.children.length > 0) return;

// 模擬掉接口
setTimeout(() => {
let result;
switch (level) {
case 0: // 一級(jí)目錄
result = [
{
value: "0",
label: "行內(nèi)轉(zhuǎn)賬-手機(jī)號(hào)",
children: []
},
{
value: "1",
label: "行內(nèi)轉(zhuǎn)賬-銀行賬號(hào)",
children: []
},
{
value: "2",
label: "匯款到當(dāng)?shù)劂y行",
children: []
},
{
value: "3",
label: "匯款到錢(qián)包",
children: []
},
{
value: "4",
label: "轉(zhuǎn)賬到CUPD",
children: []
}
];
break;
case 1: //二級(jí)目錄
// 省略此處代碼...

break;
case 2: //三級(jí)目錄
// 省略此處代碼...

break;
case 3: //四級(jí)目錄
// 省略此處代碼...

break;
case 4: // 五級(jí)目錄
result = [
{
value: "最低系統(tǒng)版本",
label: "最低系統(tǒng)版本要求"
},
{
value: "0",
label: "不啟用"
},
{
value: "1",
label: "內(nèi)測(cè)"
},
{
value: "2",
label: "上線(xiàn)"
}
];

// 設(shè)置五級(jí)菜單為葉子節(jié)點(diǎn)，無(wú)子節(jié)點(diǎn)
result.forEach((item) => {
item.leaf = level >= 4;
});
break;
default:
result = [];
break;
}

resolve(result);
}, 1000);
}
});
</script>

<template>
<!-- 級(jí)聯(lián)面板 -->
<el-cascader-panel :props="props">
<template #default="{ data }">
<!-- 輸入框節(jié)點(diǎn)對(duì)象 -->
<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>

<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 = /* 請(qǐng)求新數(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(); // 滾動(dòng)到底部時(shí)加載更多數(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 = /* 獲取圖片真實(shí)地址 */;
imageElement.src = src; // 加載圖片
window.removeEventListener('scroll', this.handleScroll); // 圖片加載后移除滾動(dòng)監(jiān)聽(tīng)
}
},
},
beforeDestroy() {
window.removeEventListener('scroll', this.handle);
},
};
</script>

<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>

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,
});

<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>