插件名称 | vue-go-top |
---|---|
发布时间 | 2020年5月21日 |
插件作者 | inotom |
可自定义的Vue组件,滚动到Web应用程序上的页面顶部按钮。
# NPM
$ npm install @inotom/vue-go-top --save
浏览器
<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>
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
:size |
Number |
70 |
宽度/高度像素大小 |
:right |
String , Number |
50 |
右边距 |
:bottom |
String , Number |
100 |
底边距 |
:bottom-gap |
String , Number |
0 |
底边距 |
:z-index |
Number |
1000 |
z-index 索引大小 |
fg-color |
String |
#ffffff |
文字颜色 |
bg-color |
String |
#ffc966 |
背景颜色 |
:radius |
String , Number |
50% |
border-radius 半径大小 |
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 |
聚焦时显示轮廓 |
box-shadow |
String |
1px 1px 2px rgba(0, 0, 0, .3) |
框影属性 |
:tabindex |
Number |
0 |
tabindex属性 |