Anchor 锚点组件

用于跳转到页面指定位置。

使用说明

1. 安装组件
2. 代码位置：https://git.yintaerp.com/yinta-fed/yinta-fed-docs/-/tree/dev/components/common/Anchor
3. 如果过程中有什么问题，可以在这个公共的git仓库中提交修改。
4. 把包加入到package.json中，例如："@yinta/anchor": "^1.0.0"

// 引入
import {Anchor, AnchorLink} from "@yinta/anchor";
// 注册
export default {
    components:{
        Anchor,
        AnchorLink
    }
}

2. 页面使用, Anchor组件所在的父级div最好悬浮起来

<template>
    <div>
        <div class="fiexd-anchor">
            <Anchor show-ink>
                <AnchorLink href="#basic_usage" title="Basic Usage" />
                <AnchorLink href="#static_position" title="Static Position" />
                <AnchorLink href="#API" title="API">
                    <AnchorLink href="#Anchor_props" title="Anchor props" />
                    <AnchorLink href="#Anchor_events" title="Anchor events" />
                    <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
                </AnchorLink>
            </Anchor>
        </div>
        
        <div id="basic_usage" class="jump-wrapper">
            <p>basic_usagebasic_usagebasic_usage</p>
            <p>basic_usagebasic_usagebasic_usage</p>
        </div>

        <div id="static_position" class="jump-wrapper">
            <p>static_position</p>
            <p>static_position</p>
        </div>

        <div id="API" class="jump-wrapper">
            <p>API</p>
            <p>API</p>

            <div id="Anchor_props" class="jump-wrapper">
                <p>Anchor_props</p>
            </div>

            <div id="Anchor_events" class="jump-wrapper">
                <p>Anchor_events</p>
            </div>

            <div id="AnchorLink_props" class="jump-wrapper">
                <p>AnchorLink_props</p>
            </div>
        </div>
    </div>
    
</template>

3.在vue.config.js中加入配置以便能进行babel编译

module.exports = {
    transpileDependencies: ['@yinta/anchor']   
}

4. API说明

Anchor props #

| 属性 | 说明 | 类型 | 默认值 | | :-------------| :----------------------------------------------| :-------------------| :------| | affix | 固定模式 | Boolean | true | | offset-top | 距离窗口顶部达到指定偏移量后触发 | Number | 0 | | offset-bottom | 距离窗口底部达到指定偏移量后触发 | Number | - | | bounds | 锚点区域边界，单位：px | Number | 5 | | scroll-offset | 点击滚动的额外距离 | Number | 0 | | container | 指定滚动的容器 | String或HTMLElement | - | | show-ink | 是否显示小圆点 | Boolean | false |

Anchor events #

| 事件名 | 说明 | 返回值 | | :----------| :------------------------| :-------------------| | on-select | 点击锚点时触发，返回链接 | href | | on-change | 链接改变时触发，返回新链接和旧链接 | newHref, oldHref |

AnchorLink props #

| 属性 | 说明 | 类型 | 默认值 | | :--------------| :--------------------| :-------| :------| | href | 锚点链接 | String | - | | title | 文字内容 | String | - | | scroll-offset | 点击滚动的额外距离 | Number | 0 |