Vue Backtotop Component
A Back-to-top component for Vue.js, which scroll page to the top when clicked
Demo
See demo.
Install via npm
npm install vue-backtotop --save
Import and use
Import for global usage
import Vue from 'vue'
import BackToTop from 'vue-backtotop'
Vue.use(BackToTop)
...
Or on a single component
import BackToTop from 'vue-backtotop'
...
},
components: { BackToTop }
...
Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | String | 'Voltar ao topo | Text of back to top button |
| visibleoffset | String or Number | 600 | Where the component should visible when user scroll reach certain offset |
| visibleoffsetbottom | String or Number | 0 | Where the component should visible when user scroll reach certain bottom offset |
| bottom | String | 40px | Bottom position of the component |
| right | String | 30px | Right position of the component |
| scrollFn (eventObject) | Function | 30px | Function defining custom actions when scrolling |
Events
| Name | Description |
|---|---|
| scrolled | Fired when page's scroll ends |
How to use
Currently, the vue-backtotop has a property named "text", that is the text which will be visible on button. The default value is "Voltar ao topo".
<back-to-top text="Back to top"></back-to-top>
The button to back to top become visible at window scroll at 600 > px. If you want to change this value, pass a property named "visibleOffset" with a number value.
<back-to-top text="Back to top" visibleoffset="500"></back-to-top>
You can also know when scroll ends
<back-to-top text="Back to top" @scrolled="myFunction"></back-to-top>
Now, it's possible to use your own html/vue component inside vue-backtotop component
<!-- in your template -->
<back-to-top bottom="50px" right="50px">
<button type="button" class="btn btn-info btn-to-top"><i class="fa fa-chevron-up"></i></button>
</back-to-top>
/* in your css */
.btn-to-top {
width: 60px;
height: 60px;
padding: 10px 16px;
border-radius: 50%;
font-size: 22px;
line-height: 22px;
}
-
用Vue写backToTop指令 指令是Vue框架中非常有用，目前正在学习当中。 以下是参照教程写的返回顶部backToTop指令，具有以下功能。 点击按钮后可以返回顶部。 当滚动到一定位置后出消失与隐藏。 还有待改进的地方。 代码中有2句是重复的。 未写到一个.vue文件中，复用性不高。 以上两点努力在以后的学习中实现。 话不多说，直接上代码。 代码块 <!DOCTYPE html> <html
-
Vue Backtotop组件 (Vue Backtotop Component) A Back-to-top component for Vue.js, which scroll page to the top when clicked. Vue.js的Back-to-top组件，单击后可将页面滚动到顶部。 View demo 查看演示 Download Source 下载源 通过npm安装 (
-
一、vue-konva是什么？ Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。 它提供了对Konva框架的声明性和反应性绑定。 所有vue-konva组件都对应于同名的KONVA组件，前缀为“ V-”。 KONVA对象可用的所有参数都可以添加为相应的VUE-KONVA组件的配置中的配置。 官网链接konva 中文链接：konva 二、核心形状有： 【v矩形、v圆
-
诚心特邀各位小伙伴加入：CSDN大前端交流社区 https://bbs.csdn.net/forums/WebLSR 快来跟前端人一起交流学习吧，致力营造成资源共享型社区。 目录 前言 使用 捕获所有路由或 404 Not found 路由 编程式导航 命名视图 别名 路由组件传参 不同的历史记录模式 导航守卫 全局前置守卫 全局解析守卫 全局后置钩子 路由独享的守卫 组件内的守卫 完整的导航解
-
Vue image-painter 图片涂鸦、绘制、标注 支持功能 1.画笔颜色 2.画笔粗细 ✏️ 3.画布放大 4.画布缩小 5.清除画布 粒 6.保存图片 7.回退一步 ↩️ 8.前进一步 ↪️ 画笔工具类型 1.画笔 ✏️ 2.直线 3.圆形 ⚪️ 4.矩形 5.橡皮 什 6.文字 实现思路 创建三个不同作用的画布 // 用于绘制的画板 this.canvas_
-
Back-To-Top 在vue中使用Back-To-Top组件，方便用户快速回到页面顶部。 属性 custom-style 自定义组件样式 visibility-height 页面滚动条滚动到指定值后显示组件，默认值400 back-position 点击后回到顶部的位置，默认值0 transition-name 设置组件transition的name属性，默认值’fade’ 组件代码 <tem
-
通过事件监听，点击之后返回顶部， 注意需要引入onMounted，onDestroyed！ <template> <div class="about"> <p>Back to top</p> <div style="height: 999px;"> </div> <div v-on:click="goTop()"> <img src="../assets/
-
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选
-
教程简介 本教程要实现一个简单的后台管理系统，包含登陆、数据列表、数据查询、列表分页、添加数据、修改数据和删除数据等功能，教程会从 Vue 入门开始讲解，包含 es6、Sass、Webpack、Bootstrap、jQuery 等技术，再到后台管理系统的一些常规功能，用 Vue 如何去实现。 也许会有人质疑 Vue 和 jQuery 的搭配，在我本人看来，jQuery 本身已很成熟，而且包含了很多
-
FAQ 哇，非常长的一页！是否意味着 Vue 2.0 已经完全不同了呢，是否需要从头学起呢，Vue 1.0 的项目是不是没法迁移了？ 非常开心地告诉你，并不是！几乎 90% 的 API 和核心概念都没有变。因为本节包含了很多详尽的阐述以及许多迁移的例子，所以显得有点长。不用担心，你不必从头到尾把本节读一遍！ 我该从哪里开始项目迁移呢？ 首先，在当前项目下运行迁移工具。我们非常谨慎地把高级 Vue
-
Integration with Vue is easily done with the @tinymce/tinymce-vue package. To use it, install it with npm like this: npm install @tinymce/tinymce-vue For information on how to use the package, check
-
本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性： 其它开发者或是团队成员更容易阅读和理解。 IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能 更容易使用现有的工具 更容易实现缓存以及代码包的分拆 要点 尽量使用ES2015，遵循CommonJs规范 切勿直接操作DOM,所以也应该避免使用jQuery库 data属性一定要是一个函数并且返回一个json对象
-
全局配置 Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性： silent 类型： boolean 默认值： false 用法： Vue.config.silent = true 取消 Vue 所有的日志与警告。 optionMergeStrategies 类型： { [key: string]: Function } 默认值： {} 用法： Vue.c