vue点击按钮滚动到顶部_使用Vue.js滚动到页面顶部按钮

最新推荐文章于 2024-03-18 09:56:46 发布

翻译最新推荐文章于 2024-03-18 09:56:46 发布 · 2.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://vuejsexamples.com/scroll-to-page-top-button-with-vue-js/

标签

#vue #css #html #css3 #js

本文介绍了如何在Vue.js中创建一个点击后滚动到页面顶部的按钮组件，包括安装、使用方法以及组件属性。

vue点击按钮滚动到顶部

Vue-go-top (vue-go-top)

Scroll to page top button, Vue.js component.

滚动到页面顶部按钮Vue.js组件。

View demo 查看演示 Download Source 下载源

安装 (Install)

浏览器 (Browser)

<script src="vue.js"></script>
<script src="vue-go-top.min.js"></script>

npm (npm)

npm install --save @inotom/vue-go-top

用法 (Usage)

浏览器 (Browser)

<div id="app">
  <go-top></go-top>
</div>

<script src="vue.js"></script>
<script src="vue-go-top.min.js"></script>
<script>
Vue.use(GoTop);
new Vue({
  el: '#app'
});
</script>

证监会 (SFC)

<template>
  <go-top></go-top>
</template>

<script>
import GoTop from '@inotom/vue-go-top';

export default {
  components: {
    GoTop
  }
}
</script>

道具 (Props)

name	type	defaults	description
`:size`	`Number`	`70`	width/height pixel size
`:right`	`String`, `Number`	`50`	margin from right
`:bottom`	`String`, `Number`	`100`	margin from bottom
`:bottom-gap`	`String`, `Number`	`0`	gap of bottom margin
`:z-index`	`Number`	`1000`	z-index size
`fg-color`	`String`	`#ffffff`	text color
`bg-color`	`String`	`#ffc966`	background color
`:radius`	`String`, `Number`	`50%`	border-radius size
`weight`	`String`	`normal`	line weight of arrow
`ripple-bg`	`String`	`rgba(255, 255, 255, .5)`	ripple animation color
`:boundary`	`Number`	`200`	top position where the element is displayed
`:max-width`	`Number`	`640`	media query max-width(px)
`src`	`String`	`null`	image url
`alt`	`String`	``	alternative text for image
`:has-outline`	`Boolean`	`true`	show outline when focus

名称	类型	默认值	描述
`:size`	`Number`	`70`	宽度/高度像素大小
`:right`	`String` ， `Number`	`50`	右边距
`:bottom`	`String` ， `Number`	`100`	底边距
`:bottom-gap`	`String` ， `Number`	`0`	底边距
`:z-index`	`Number`	`1000`	Z索引大小
`fg-color`	`String`	`#ffffff`	文字颜色
`bg-color`	`String`	`#ffc966`	背景颜色
`:radius`	`String` ， `Number`	`50%`	边界半径大小
`weight`	`String`	`normal`	箭头线宽
`ripple-bg`	`String`	`rgba(255, 255, 255, .5)`	涟漪动画颜色
`:boundary`	`Number`	`200`	元素显示的最高位置
`:max-width`	`Number`	`640`	媒体查询最大宽度(px)
`src`	`String`	`null`	图片网址
`alt`	`String`	``	图像的替代文字
`:has-outline`	`Boolean`	`true`	聚焦时显示轮廓