当前位置: 首页 > news >正文

vue3单独引用element-plus的Infinite Scroll无限滚动;vue3自定义指令

文章目录

  • 1.正常单独使用element-plus其他功能组件
  • 2.引入类似与指令的插件
  • 3.自定义指令钩子

1.正常单独使用element-plus其他功能组件

引入即可使用

import { ElSelect, ElOption } from "element-plus"

2.引入类似与指令的插件

需要先引入,再注册,才可以使用
指令类的组件:例如v-infinite-scroll="load"

<div v-infinite-scroll-directive="load" style="overflow: hidden">
     ...
</div>
      
import { ElInfiniteScroll } from "element-plus" // 注意是引入ElInfiniteScroll 不是VInfiniteScroll

// 必须注册指令(TS需要显式声明)
const vInfiniteScrollDirective = ElInfiniteScroll

// 原来在项目内使用v-infinite-scroll="load";
// 如果是按照上述在某个vue页面单独引入和注册后;
// 需要使用注册后的指令名 v-infinite-scroll-directive="load"

const load = ()=>{}

3.自定义指令钩子

<input v-focus />

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}

</script>

这里是引用

详细使用文档
在这里插入图片描述

相关文章:

  • 一、Redis简介篇
  • 【操作系统安全】任务5:Windows 文件与文件系统
  • 解锁淘宝分类宝藏:深入探索“cat_get”接口的力量
  • vue3 elementUi table自由渲染组件
  • 使用computed计算属性实现购物车勾选
  • 【leetcode hot 100 105】从前序与中序遍历序列构造二叉树
  • 【从零开始】Air780EPM的LuatOS二次开发——OneWire协议调试注意事项!
  • C++之list类及模拟实现
  • 《C#上位机开发从门外到门内》3-5:基于FastAPI的Web上位机系统
  • 【NLP】 1. 文本在计算机里的表示: One-Hot, sparse vector, bag of words
  • MCU的应用场景:从智能家居到工业控制
  • 【Go】无法访问 proxy.golang.org 进行依赖下载
  • spring bean的生命周期和循环依赖
  • 量子信息理论入门:探索量子世界的奇妙信息处理方式
  • .gitignore 文件用于 Git 应忽略的文件夹的格式
  • 详细讲一下 Webpack 主要生命周期钩子流程(重难点)
  • SpringBoot美发门店管理系统开发与设计
  • 网页制作18-Javascipt图像特效の图片闪烁
  • MySQL 横向衍生表(Lateral Derived Tables)
  • element ui设置结束时间为23:59:59
  • 五一假期上海多个景点人流如织,警方多措并举确保秩序
  • 长三角铁路持续迎五一出行高峰:今日预计发送旅客418万人次
  • 马克思主义理论研究教学名师系列访谈|高福进:思想政治理论课要伴随时代不断更新和变化
  • 五一期间全国高速日均流量6200万辆,同比增长8.1%
  • 城市更新·简报│中央财政支持城市更新,倾斜超大特大城市
  • 神十九乘组安全顺利出舱