首页 > 其他分享 >vue3自定义指令实现el-select下拉加载更多

vue3自定义指令实现el-select下拉加载更多

时间:2023-04-28 16:48:07浏览次数:41  
标签:el const 自定义 app loadmore vue3 element select

1. 新建js文件
export default (app) => {
  app.directive('loadmore', {
    beforeMount(el, binding) {
      const element = el.querySelector('.t-select__dropdown');
      element.addEventListener('scroll', () => {
        const { scrollTop, scrollHeight, clientHeight } = element;
        const scrollDistance = scrollHeight - scrollTop - clientHeight;
        if (scrollDistance <= 0) {
          binding.value();
        }
      });
    },
  });
};
2. mian.js注册
import drgDirectives from './utils/directive/loadmore';
drgDirectives(app);
3. 使用
<el-select
  v-model="val"
  v-loadmore="loadmore"
  filterable
  :options="options"
  clearable
/>

  const loadmore = () => {    console.log('触底的时候触发loadmore');  };

 

标签:el,const,自定义,app,loadmore,vue3,element,select
From: https://www.cnblogs.com/huanhuan55/p/17362571.html

相关文章

  • 模型层(models层) -- ORM
    目录Django模型层之ORM介绍sqlite3数据库pycharm查看sqlite3文件Navicate连接sqlite3测试环境的搭建单表操作单表的增删改查常见的十几种查询方法查看原生SQL语句query属性在settings中配置LOGGING日志基于双下划线查询多表查询之表关系操作一对多的外键增删改查数据多对多外键增......
  • Python rangelib.RangeSet类代码示例
    https://vimsky.com/examples/detail/python-ex-rangelib-RangeSet---class.htmlPythonrangelib.RangeSet类代码示例本文整理汇总了Python中rangelib.RangeSet类的典型用法代码示例。如果您正苦于以下问题:PythonRangeSet类的具体用法?PythonRangeSet怎么用?PythonRangeSet使......
  • CMakeLists---自定义变量-add_definitions()函数
    转载:https://blog.csdn.net/qq_35699473/article/details/115837708引言其实这个函数在安装一些库的时候,它的CMakeLists里面就有这样的函数。典型的就是opencv了。opencv安装时候有一些指令也是针对这个函数的,比如安装命令(随便搜索的):cmake ../opencv-3.4.1-DWITH_GTK_2......
  • Vue2.0版本升级到vue3.0
    vue版本的升级主要步骤:一、首先需要卸载你之前的vue2.0版本输入cmd–>回车–>进入dos界面输入命令查询vue的版本:vue-Vorvue-Version输入命令卸载目前vue版本:npmuninstall-gvue-cli再输入vue版本查询命令,提示“不是可执行的命令”则表示卸载成功了。二、安装新......
  • el-tree实现树形结构叶子节点和非叶子节点的区分显示的写法
    需求,非叶子节点显示主题名称+主题下的指标;叶子节点显示代码+名称1、设置prop属性<el-tree:data="dimListTree"ref="dimListTree"row-key="getGroup":props="treeProps":allow-drop="al......
  • ElasticSearch是什么
    一、ElasticSearch简介ElasticsearchElasticsearch是一个基于ApacheLucene(TM)的开源搜索引擎。无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进、性能最好的、功能最全的搜索引擎库。特点:分布式的实时文件存储,每个字段都被索引并可被搜索分布式的实时分析搜索引......
  • 如何在Timeline中创建自定义轨道?
    你好,我是跟着大智学Unity的萌新,我叫小新,这是我本周的学习总结报告哦。用过一段时间Timeline后,我问大智:“Timeline中只有这么几个轨道么?我发现有的需求这些轨道根本没办法满足,使用之前学过的PlayableTrack也很麻烦,还有其他办法么?”大智:“你遇到了什么问题呢?”小新:“之前咱们学的那......
  • 揭开Timeline中Playable Track的神秘面纱
    你好,我是跟着大智学Unity的萌新,我叫小新,这是我本周的学习总结报告哦。大智:“小新,学习PlayableTrack之前你了解它么?”小新:“还真不了解,我尝试过,但是添加以后一片空白,啥都没有,就不知道该怎么用了。”大智:“那估计有很多同学也遇到过这种情况,你今天就带着大家一起探索下吧。”小新:“......
  • Timeline的Animation Track详解
    你好,我是跟着大智学Unity的萌新,我叫小新,这是我本周的学习总结报告哦。在Timeline中,AnimationTrack可能是我们用的最多的一个轨道了,而且功能也相对比较多,今天小新就来总结一下AnimationTrack经常用到的那些功能。在Timeline中录制基本动画你可以直接在Timeline的Animation轨道上录......
  • Hibernate查询返回自定义对象
    /***Convertqueryresulttovolistutilclass.*/classAliasToBeanResultTransformerimplementsResultTransformer{privatestaticfinallongserialVersionUID=-5199190581393587893L;privatefinalClass<T>resultCla......