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

// main.js or main.ts

import { 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 属性的提示内容，默认值 true
    const showIconTips = true;

	// 参数四（showWhichIcon）：可选参数，根据当前滚动情况，显示哪个滚动图标：
    // 'both'：显示[回到顶/底部]两个图标（默认值），
    // 'top'：只显示[回到顶部]图标，
    // 'bottom'：只显示[回到底部]图标
    const showWhichIcon = 'both';

	// 参数五（scrollDistance）：可选参数，滚动多少距离后才显示[回到顶/底部]图标，默认值 1
    const scrollDistance: 1;
    
    // 参数六（cssObj）：可选参数，组件 css 样式设置参数的对象，以下均为默认值，如不传该参数，各属性将使用默认值，
    // 如果只想修改某些 css 属性，只需要设置需要修改的属性即可，如：
    // <GotoTopOrBottom :cssObj="{width: '30px', height: '30px'}" />
	// cssObj 样式设置对象参数各属性默认值如下：
    const cssObj = {
      // 本组件滚动图标距离父容器或页面顶部的距离，默认值是50%，top: '50%' + translateY: '-50%' 为垂直居中
      top: '50%',
      // 本组件滚动图标距离父容器或页面右边距的距离，默认值30px
      right: '30px',
      // 本组件滚动图标向上移动自身距离的一半（-50%，默认）
      translateY: '-50%',
      // [回到底部]图标盒子顶部距离[回到顶部]图标底部的距离，默认值10px
      marginTop: '10px',
      // 本组件滚动图标的宽高大小设置，默认值40px
      width: '40px',
      height: '40px',
      // 本组件滚动图标的四边角圆弧度设置，50%为正圆形，默认值50%
      borderRadius: '50%',
      // 本组件滚动图标的颜色，默认为浅蓝色#2c8ce6
      backgroundColor: '#2c8ce6',
      // 本组件滚动图标的透明度设置，默认值为 0.6
      opacity: '.6',
      // 拖拽滚动图标到上下左右边界时保留的间距值，默认值为0px
      sideMargin: '0px'
    }
    
    // 参数七（animateObj）：可选参数，组件滚动动画效果参数设置，以下均为默认值，如不传该参数，将使用以下默认值：
    const animateObj = {
      // 是否开启滚动动画，不开启则立即一次性滚动到顶部/底部，默认开启true
      enable: 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>