vue按需引入element-ui中的infinite-scroll(无限滚动)指令

最新推荐文章于 2024-02-26 08:49:07 发布

原创最新推荐文章于 2024-02-26 08:49:07 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

踩坑日记专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中按需引入Element-UI的infinite-scroll指令，包括单组件引入、指令注册和使用方法。同时提到了element-ui中popover弹出框样式修改无效的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤

1.单组件引入指令

代码如下（示例）：

<template>
...
</template>
<script>
import { InfiniteScroll } from "element-ui";
</script>
<style lang="less">
<style>

2.指令注册

代码如下（示例）：

<template>
...
</template>
<script>
import { InfiniteScroll } from "element-ui";
export default {
	directives: {
    	"infinite-scroll": InfiniteScroll,
 	},
}
</script>
<style lang="less">
<style>

3.使用指令

代码如下（示例）：

<template>
	<ul v-infinite-scroll="getUserFollows">
		<li v-for="(people, index) in follows" :key="index">{{ people.nickname }}</li>
	</ul>
</template>
<script>
import { InfiniteScroll } from "element-ui";
export default {
	directives: {
    	"infinite-scroll": InfiniteScroll,
 	},
 	methods: {
 		getUserFollows() {
 			...
		}
	}
}
</script>
<style lang="less">
<style>