vue3——利用自定义指令实现下拉框分页懒加载

需求:下拉框一开始请求第一页的内容,滚动到最后的时候,请求第二页的内容,如此反复,直到所有数据加载完成。

selectLoadMore.ts

//自定义指令:实现下拉框下拉到末尾时,加载下一页的内容
// 使用时传两个参数,一个是下拉框的class,一个是下拉框滚动到末尾时触发的函数,比如:
// v-el-select-loadmore="{
//   selector: '.myOption .el-select-dropdown .el-select-dropdown__wrap',
//   loadFunction: loadMore
// }"
export default {mounted(el, binding) {//解构传来的值const {value: { selector, loadFunction }} = bindingconst SELECTWRAP_DOM = document.querySelector(selector)if (SELECTWRAP_DOM) {// 监听事件的处理函数,把函数单独写出来,方便销毁const scrollHandler = () => {const condition = SELECTWRAP_DOM.scrollTop + SELECTWRAP_DOM.clientHeight >= SELECTWRAP_DOM.scrollHeight - 1if (condition) {loadFunction()}}//赋值,为了方便销毁,这里很重要,不然销毁的时候找不到dom和对应的回调函数!!!el.dom = SELECTWRAP_DOMel.event = scrollHandler//监听滚动事件SELECTWRAP_DOM.addEventListener('scroll', scrollHandler)}},
//销毁,会在关闭弹窗时触发(这里的el-select写在弹窗里)beforeUnmount(el) {if (el.dom) {el.dom.removeEventListener('scroll', el.event)}}
}

记得在main.ts里面注册成全局组件!!!! 

main.ts

import vElSelectLoadmore from '@/utils/tools/selectLoadMore'
app.directive('el-select-loadmore', vElSelectLoadmore) //全局自定义指令
app.mount('#app')

使用的vue文件 

//使用时在指令里传值,这里有个坑!
//在el-select给一个参数popper-class="myOption",因为element-plus中ei-select的选项是使用的popper.js生成的,无法直接获取,直接获取下拉框的dom获取不到<el-selectv-el-select-loadmore="{selector: '.myOption .el-select-dropdown .el-select-dropdown__wrap',loadFunction: loadMore}"v-model="userForm.accountName"placeholder="请选择用户"popper-class="myOption"><el-optionv-for="(item, index) in userData"v-loading="optionLoading(index)":key="item.id":label="item.username":value="item.id"/></el-select>//总共的数据条数
let totalCount: number = 0
//当前滚动页
let page: number/*** 自定义指令触发的回调*/
function loadMore() {//计算总页数let maxPagSize: number = Math.max(Math.ceil(totalCount / 10), 1)//不超过总页数才发请求if (page < maxPagSize) {page += 1//发请求,获得接口数据getUserListWrap(page, 10)}
}/*** 控制下拉框loding是否出现,isOptionLoading是在getUserListWrap请求函数里面的,userData是请求函数获得是下拉框数据,这样可以使下拉到最后一个option的时候,出现loding效果,更加完善美观* @param index 下拉框循环的index*/
function optionLoading(index: number): boolean {if (isOptionLoading.value && index == userData.length - 1) {return true} else {return false}
}

总结:

1、 在el-select给一个参数popper-class="myOption",因为element-plus中el-select的选项是使用的popper.js生成的,无法直接获取,直接获取下拉框的dom获取不到

2、在自定义指令里面销毁事件的时候,在mounted必须把事件存在el上,不然不好销毁,一开始是以下这么写的:发现这样不好销毁,因为在 beforeUnmount拿不到function,this只能按以下这么写才行,如果单独把funtion拎出来,this就报错找不到

export default {mounted(el, binding) {const {value: { selector, loadFunction }} = bindingconst SELECTWRAP_DOM = document.querySelector(selector)if (SELECTWRAP_DOM) {SELECTWRAP_DOM.addEventListener('scroll', function () {const condition = this.scrollTop + this.clientHeight >= this.scrollHeight - 1if (condition) {loadFunction()}})}}
}

 vue3的demo代码如下:

<template><el-form-item label="用户名称:"><el-select popper-class="myOption"v-model="accountName" placeholder="请输入或选择用户"  v-el-select-loadmore="loadMore"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item>
</template><script setup lang="ts">
import {ref,onMounted} from 'vue'
let page = ref(1)
let pageSize = ref(10)
let total = 100
let totalCount=6
let stopLoading = false
let accountName = ref('')
const options = ref([])
onMounted(() => {options.value.length=0loadOptions(1)
})function loadMore() {//这里设置接口的最大页数totalCount为6,超过6页就没数据了if (page.value <= totalCount) {page.value += 1;//获得接口数据loadOptions(page.value);}}function loadOptions(page:number) {// 模拟接口发送数据,异步加载数据setTimeout(() => {for (let i = (page-1)*10+1; i <= page*10; i++) {options.value.push({value: `Option${i}`,label: `Option${i}`});}}, 500);
}
//在自定义指令
const vElSelectLoadmore = {mounted(el: any, binding: any) {// 坑:const SELECTWRAP_DOM:Element|null = document.querySelector('.myOption .el-select-dropdown .el-select-dropdown__wrap');if (SELECTWRAP_DOM) {SELECTWRAP_DOM.addEventListener('scroll', function () {const condition = this.scrollTop+this.clientHeight >= this.scrollHeight-1;// 当滚动条滚动到最底下的时候执行接口加载下一页if (condition) {binding.value && binding.value()}});}},}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/49892.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【系统架构设计师】十八、架构设计实践(信息系统架构设计理论与实践2)

目录 四、企业信息系统的总体框架 4.1 战略系统 4.2 业务系统 4.3 应用系统 4.4 企业信息基础设施 4.5 业务流程重组BPR 4.6 业务流程管理BPM 五、信息系统架构设计方法 5.1 行业标准的体系架构框架 5.2 架构开发方法 5.3 信息化总体架构方法 5.4 信息化建设生命周…

防火墙——网络环境支持

目录 网络环境支持 防火墙的组网 web连接上防火墙 web管理口 让防火墙接到网络环境中 ​编辑 管理员用户管理 缺省管理员 接口 配置一个普通接口 创建安全区域 路由模式 透明模式 混合模式 防火墙的安全策略 防火墙转发流程 与传统包过滤的区别 创建安全策略 …

DDoS攻击:威胁与防护策略

DDoS&#xff08;分布式拒绝服务&#xff09;攻击是网络安全领域的一大挑战&#xff0c;对企业造成严重的影响。本文将深入探讨DDoS攻击的原理和防护方法。 DDoS攻击的原理 DDoS攻击通过大量请求&#xff0c;使目标系统无法响应正常请求。攻击者利用多台计算机发送大量请求&am…

气膜羽毛球馆的维护和运营成本解析—轻空间

随着人们对健康生活方式的追求不断增加&#xff0c;羽毛球这项运动也愈发受到欢迎。然而&#xff0c;传统的羽毛球馆往往存在建设周期长、成本高、维护复杂等问题。气膜羽毛球馆作为一种新型的运动场馆解决方案&#xff0c;因其快速搭建、环保节能、舒适环境等优势而逐渐被广泛…

跨平台桌面应用程序框架Electron

用于构建跨平台桌面应用程序的框架。Electron 由 GitHub 开发&#xff0c;它允许开发者使用 Web 技术&#xff08;如 HTML、CSS 和 JavaScript&#xff09;来创建桌面软件。Electron 基于 Node.js 和 Chromium&#xff0c;因此可以提供丰富的功能和性能。 Electron 的主要优点…

netty入门-5 ServerBootstrap与Bootstarp

前言 本来这篇应该紧接着说明Future和Promise。 但是考虑前文第三篇即用到了ServerBootstrap来启动一个服务器&#xff0c;并且我读的闪电侠netty&#xff0c;先写的服务器与客户端启动这部分。索性就先写出来了。主要内容来自闪电侠netty ServerBootstrap ServerBootstrap就…

LabVIEW和IQ测试仪进行WiFi测试

介绍一个使用LabVIEW和LitePoint IQxel-MW IQ测试仪进行WiFi测试的系统。包括具体的硬件型号、如何实现通讯、开发中需要注意的事项以及实现的功能。 使用的硬件​ IQ测试仪型号: LitePoint IQxel-MW 电脑: 配置高效的台式机或笔记本电脑 路由器: 支持802.11ax (Wi-Fi 6) 的…

C语言 | Leetcode C语言题解之第282题给表达式添加运算符

题目&#xff1a; 题解&#xff1a; #define MAX_COUNT 10000 // 解的个数足够大 #define NUM_COUNT 100 // 操作数的个数足够大 long long num[NUM_COUNT] {0};long long calc(char *a) { // 计算表达式a的值// 将数字和符号&#xff0c;入栈memset(num, 0, sizeof(num));in…

探索自注意力机制:目标检测领域的革新者

探索自注意力机制&#xff1a;目标检测领域的革新者 在深度学习的目标检测领域&#xff0c;自注意力机制&#xff08;Self-Attention Mechanism&#xff09;以其独特的能力&#xff0c;为处理图像中的目标提供了一种全新的视角。自注意力机制允许模型在处理图像时&#xff0c;…

Android MVVM最佳实践(LifecyclesRetrofit)

当结合MVVM架构、Lifecycle以及网络请求时&#xff0c;通常会使用Retrofit库来进行网络请求操作。以下是如何在Android应用中整合Retrofit进行网络请求&#xff0c;并与MVVM架构和Lifecycle结合的示例&#xff1a; 1. 添加依赖项 确保在项目的build.gradle文件中添加Retrofit…

开发环境搭建:步入C++编程世界的基石

在探索C++这一强大而灵活的编程语言时,搭建一个高效、舒适的开发环境是每位初学者的首要任务。开发环境不仅影响着编程的效率,还直接关系到编程体验和学习效果。本文将详细阐述如何为C++编程搭建一个全面的开发环境,从选择合适的IDE(集成开发环境)、配置编译器,到管理项目…

2024大家都想掌握的4种PDF翻译技巧

借着互联网的东风现在全球化的交流越发频繁&#xff0c;很多时候都会遇到跨语言交流的问题。外语不好的小伙伴阅读外国文献的时候应该都很头疼吧&#xff0c;这时候pdf翻译成中文的工具就可以解决这个问题啦。 1.福昕翻译 直通车&#xff1a;https://fanyi.pdf365.cn/ 这个…

@Builder注释导致@RequestBody的前端json反序列化失败,HTTP400

项目里发生了一个bug&#xff0c;就是前端请求一个接口时候&#xff0c;报了HTTP 400 Bad Request 通常来说这个问题是前后端的参数没对齐&#xff0c;比如前端传了个String&#xff0c;但后端对应的是Integer。 所以我就排查了半天&#xff0c;结果没发现啥错误&#xff0c;…

PSINS工具箱函数介绍——insplot

insplot是一个绘图命令,用于将avp数据绘制出来 本文所述的代码需要基于PSINS工具箱,工具箱的讲解: PSINS初学指导基于PSINS的相关程序设计(付费专题)使用方法 此函数使用起来也很简单,直接后面加avp即可,如: insplot(avp);其中,avp为: 每行表示一个时间1~3列为姿态…

量化交易策略解读

光大证券-20190606-重构情绪体系&#xff0c;探知市场温度——市场情绪体系系列报告之二.pdf 市场情绪与股市择时体系研究 市场情绪的重要性 市场情绪反映了投资者心理状态的集体体现&#xff0c;对市场走势有同步或滞后的影响&#xff0c;并在某些情况下预示市场转折点。 择…

一键解锁:科研服务器性能匹配秘籍,选择性能精准匹配科研任务和计算需求的服务器

一键解锁&#xff1a;科研服务器性能匹配秘籍 HPC科研工作站服务器集群细分领域迷途小书童 专注于HPC科研服务器细分领域kyfwq001 &#x1f3af;在当今科技飞速发展的时代&#xff0c;科研工作对计算资源的需求日益增长&#x1f61c;。选择性能精准匹配科研任务和计算需求的服…

力扣39题:组合总和的 Java 实现

引言 力扣&#xff08;LeetCode&#xff09;是一个在线编程平台&#xff0c;提供了大量的编程题目供开发者练习。第39题“组合总和”是一个经典的回溯算法问题&#xff0c;要求找出所有可能的组合&#xff0c;使得组合中的数字之和等于给定的目标值。本文将介绍如何使用 Java …

集合的面试题和五种集合的详细讲解

20240724 一、面试题节选二、来自于b站人人都是程序员的视频截图 &#xff08;感谢人人都是程序员大佬的视频&#xff0c;针对于个人复习。&#xff09; 一、面试题节选 二、来自于b站人人都是程序员的视频截图 hashmap&#xff1a; 唯一的缺点&#xff0c;无序&#xf…

maven项目容器化运行之3-优雅的利用Jenkins和maven使用docker插件调用远程docker构建服务并在1Panel中运行

一.背景 在《maven项目容器化运行之1》中&#xff0c;我们开启了1Panel环境中docker构建服务给到了局域网。在《maven项目容器化运行之2》中&#xff0c;我们基本实现了maven工程创建、远程调用docker构建镜像、在1Panel选择镜像运行容器三大步骤。 但是&#xff0c;存在一个问…

昇思25天学习打卡营第23天 | CycleGAN图像风格迁移互换

昇思25天学习打卡营第23天 | CycleGAN图像风格迁移互换 文章目录 昇思25天学习打卡营第23天 | CycleGAN图像风格迁移互换CycleGAN模型模型结构循环一致损失函数 数据集数据下载创建数据集 网络构建生成器判别器损失函数和优化器前向计算梯度计算与反向传播 总结打卡 CycleGAN模…