自开发多功能Vue组件:可定义滚动速度[回到顶部/底部]图标组件的安装与使用！

在 main.js / main.ts 中全局注册本组件，这样在其它所有组件及.vue页面中直接使用本组件标签即可，无需再导入，全局注册代码如下：

// main.js or main.tsimport { createApp } from 'vue';import App from './App.vue';// 1、导入本组件（必须用默认导入方式）import GotoTopOrBottom from 'vue3-goto-top-or-bottom';// 根据 App.vue 组件创建 Vue app 实例const app = createApp(App);// 2、全局注册本组件app.use(GotoTopOrBottom);// 挂载 Vue app 实例到 id 为 'app' 的 DOM 节点中app.mount('#app');

在每个需要使用本组件的.vue文件中都要导入本组件（必须用分别导入方式）：

// 1、导入本组件<script setup lang="ts">// 必须用分别导入方式（在 main.js or main.ts 中全局注册，则要用默认导入方式）import { GotoTopOrBottom } from '@samdy-chan/vue3-goto-top-or-bottom';/**** 组件参数及支持的自定义事件设置 ****//** 本组件目前支持配置及传递 2 个可选的自定义事件，分别是：@topFinished、@bottomFinished，说明如下：
@topFinished：点击[回到顶部]图标或滚动条滚动到顶部后，要调用的自定义事件回调函数；
@bottomFinished：点击[回到底部]图标或滚动条滚动到底部后，要调用的自定义事件回调函数；**//** 本组件目前支持配置及传递 7 个 Props 参数，分别是：timeout、parentIsWindow、showIconTips、showWhichIcon、scrollDistance、cssObj、animateObj，其中 cssObj、animateObj 为对象式配置参数，这些参数的作用及说明如下（也可详见本组件的TS类型声明文件<<goto-top-or-bottom.vue.d.ts>>，如果是在 vite + ts 环境中使用本组件，import 导入本组件后，按住Ctrl+鼠标左击本组件名，会自动弹出类型声明或跳转到类型声明文件）**/// 参数一（timeout）：可选参数，加载或刷新页面时，延迟显示本组件滚动图标的时间，默认值为2000毫秒（2秒）。因为父容器的内容有可能是异步获取的（如读取文件或请求后端 api 接口），这样的话，一开始父容器还没有内容，是不会有滚动条的，待获取到异步数据填充到父容器并超过其允许的高度后，才会出现滚动条，此时，才判断需要显示滚动图标，可根据你的系统及网络状况，调节该延迟参数，单位为毫秒，一般使用默认值2000毫秒应该足够。const timeout = 2000;// 参数二（parentIsWindow）：可选参数，父容器是否为顶级元素（window/document/body），默认值为false，将本组件放在哪个HTML标签容器内，就是使用本组件控制哪个HTML标签容器（父容器）的滚动。const parentIsWindow = false;/** 如果需要为某个块级父容器（如 div/main/section/article/aside/display:block等）添加本滚动图标组件，只需要将本组件放在父容器一级子级别中即可，如下：<div class="parent-container">......<GotoTopOrBottom /></div>**//** 如果需要把本滚动图标组件控制顶级对象（window/document/body）的滚动，即滚动整个页面窗口的滚动条时，显示和使用本组件，侧可将本组件放在页面任何HTML标签内，但需要指定 parentIsWindow 参数或设置为 true，如下：......<GotoTopOrBottom :parentIsWindow="true" />**/// 参数三（showIconTips）：可选参数，鼠标放在[回到顶部/底部]图标是否显示标签 title 属性的提示内容，默认值 trueconst showIconTips = true;// 参数四（showWhichIcon）：可选参数，根据当前滚动情况，显示哪个滚动图标：// 'both'：显示[回到顶/底部]两个图标（默认值），// 'top'：只显示[回到顶部]图标，// 'bottom'：只显示[回到底部]图标const showWhichIcon = 'both';// 参数五（scrollDistance）：可选参数，滚动多少距离后才显示[回到顶/底部]图标，默认值 1const scrollDistance: 1;// 参数六（cssObj）：可选参数，组件 css 样式设置参数的对象，以下均为默认值，如不传该参数，各属性将使用默认值，// 如果只想修改某些 css 属性，只需要设置需要修改的属性即可，如：// <GotoTopOrBottom :cssObj="{width: '30px', height: '30px'}" />// cssObj 样式设置对象参数各属性默认值如下：const cssObj = {// 本组件滚动图标距离父容器或页面顶部的距离，默认值是50%，top: '50%' + translateY: '-50%' 为垂直居中top: '50%',// 本组件滚动图标距离父容器或页面右边距的距离，默认值30pxright: '30px',// 本组件滚动图标向上移动自身距离的一半（-50%，默认）translateY: '-50%',// [回到底部]图标盒子顶部距离[回到顶部]图标底部的距离，默认值10pxmarginTop: '10px',// 本组件滚动图标的宽高大小设置，默认值40pxwidth: '40px',height: '40px',// 本组件滚动图标的四边角圆弧度设置，50%为正圆形，默认值50%borderRadius: '50%',// 本组件滚动图标的颜色，默认为浅蓝色#2c8ce6backgroundColor: '#2c8ce6',// 本组件滚动图标的透明度设置，默认值为 0.6opacity: '.6',// 拖拽滚动图标到上下左右边界时保留的间距值，默认值为0pxsideMargin: '0px'}// 参数七（animateObj）：可选参数，组件滚动动画效果参数设置，以下均为默认值，如不传该参数，将使用以下默认值：const animateObj = {// 是否开启滚动动画，不开启则立即一次性滚动到顶部/底部，默认开启trueenable: true,// 动画时长，单位毫秒，默认值300毫秒，需开启动画才生效(animateObj.enable=true)。数字越大，滚动越慢，建议保留默认值即可duration: 300,// 定时器控制多久滚动一次，单位毫秒，默认值15毫秒，需开启动画才生效(animateObj.enable=true)。数字越大，滚动越卡顿，建议保留默认值即可interval: 15}// 说明：animateObj.duration 和 animateObj.interval 参数可产生滚动次数（滚动多少次才能滚动到顶/底部）；滚动次数 = animateObj.duration / animateObj.interval
</script>

// 2、使用本组件// 2.1、在 div 等块状盒子父容器中使用本组件（控制div等块状父容器的滚动）<template><div class="parent-container"><!-- 使用方式1：最基本使用，无需传递任何参数，使用默认值一般足够了，本组件必须放在父容器标签一级层次内 --><GotoTopOrBottom /><!-- 使用方式2：传递如上设置的指定参数 --><!--<GotoTopOrBottom :timeout="2000" :parentIsWindow="false" :showIconTips="true"showWhichIcon="both":scrollDistance="1":cssObj="cssObj" :animateObj="animateObj" />--><!-- 使用方式3：传递设置参数的非默认值 --><!--<GotoTopOrBottom :timeout="1500" showWhichIcon="top":scrollDistance="50":cssObj="{width: '30px', height: '30px', backgroundColor: '#00ff00'}" :animateObj="{duration: 500}" />--></div>
</template>// 2.2、在 window/document/body 顶级父容器中使用本组件（控制顶级父容器的滚动）
<template><!-- 必须要指定 parentIsWindow 参数或设置其为布尔类型值 true，其它的参数设置同上2.1所说的。要将 window/document/body 作为父容器时，可将本组件放在任意HTML标签内--><GotoTopOrBottom :parentIsWindow="true" />
</template>