@yinta/anchor v1.0.5

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 #

Anchor events #

AnchorLink props #