首页 > 其他分享 >滚动到底部的Vue指令插件

滚动到底部的Vue指令插件

时间:2023-09-07 18:22:52浏览次数:39  
标签:插件 Vue 滚动 vue 指令 底部

简介及使用教程

Vue Chat Scroll是一个保持可滚动内容滚动到底部的Vue指令插件,用于Vue.js 2,当在该元素中添加新内容时,滚动到该元素的底部。

安装

npm i vue-chat-scroll

使用

import Vue from 'vue'

import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

基本用法

<ul class="messages" v-chat-scroll>
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

 

标签:插件,Vue,滚动,vue,指令,底部
From: https://www.cnblogs.com/Jishuyang/p/17685768.html

相关文章

  • Vue3实战06-CompositionAPI+<script setup>好在哪?
    Vue3的CompositionAPI+<scriptsetup>这种最新的代码组织方式。<scriptsetup>是啥?为啥尤大在微博强推?本文就使用CompositionAPI和<scriptsetup>重构第2讲的清单应用。重构过程将明白,CompositionAPI让我们更好组织代码结构,<scriptsetup>本质是更精简方式写Compositi......
  • vite + vue3 自动导入点击路由刷新问题记录
     exportdefaultdefineConfig(()=>{//这里只加入了element的有其他的也加在这里constoptimizeDepsElementPlusIncludes=['element-plus/es'];//预加载element样式有其他组件也是如此设置即可fs.readdirSync('node_modules/element-plus/es/components').......
  • Vue3实战06-CompositionAPI+<script setup>好在哪?
    Vue3的CompositionAPI+<scriptsetup>标签内定义的变量和函数,都可以在模板中直接使用。###1.2显示清单应用实现累加器后,回到src/pages/Home.vue组件,使用如下代码显示清单应用。直接importTodoList.vue组件,然后<scriptsetup>会自动把组件注册到当前组件,这样......
  • java 支持 超大上G,多附件上传插件
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1. 通过form表单向后端发送请求         <formid="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="pos......
  • 2-Vue.js环境准备-使用vue-cli快速搭建项目(cli2)
    一、概述在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用。如果使用npm过程中安装速度过慢,可以考虑使用淘宝镜像的cnpm来代替npm。首先Vue的安装依赖于Node.js,要保证你的计算机上已经安装过Node.js。可以参考前面的文章:https://blog.csdn.net/G......
  • 推荐一个react上拉加载更多插件:react-infinite-scroller
    在开发网页和移动应用时,经常需要处理大量数据的展示和加载。如果数据量非常大,一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题,我们可以使用无限滚动(InfiniteScroll)的技术。React提供了一个方便的组件库,即react-infinite-scroller,它可以帮助我们实现无限滚动的功能。......
  • vue中的nextTick的作用
    vue里面,常用的事件onMounted里,总喜欢用一个nextTick:onMounted(()=>{nextTick(()=>{init();});});这个东西有啥用呢?我总搞不懂。今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是,等前面的都执行完了,再执行nextTick里面的方法。比如说,页面上有一块内容,正......
  • Vue2 中每个组件实例都对应一个 watcher 实例? .
    Vue2中每个组件实例对应一个渲染Watcher实例,用于监听组件的响应式数据变化并更新视图。除了渲染Watcher,还可以通过watch属性来创建额外的Watcher实例,用于监听特定的数据变化。在Vue2中,每个组件实例都有一个$watch方法,可以用于创建Watcher实例。......
  • Laravel+Vue前后端分离框架
    项目介绍一款PHP语言基于Laravel9、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,目前框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发,提升研发......
  • ThinkPhp+Vue前后端分离框架
    项目介绍一款PHP语言基于ThinkPhp6、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,目前框架已集成了完整的RBAC权限架构和常规基础模块,前端Vue端支持多主题切换,......