非常教程

iView UI参考手册

组件布局

Anchor 锚点

概述

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

代码示例

  • 基础用法
  • 静态位置
  • API
  • Anchor props
  • Anchor events
  • AnchorLink props

基础用法

最简单的用法。

<template>
    <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>
</template>
<script>
    export default {
        
    }
</script>
  • 基础用法
  • 静态位置
  • API
  • Anchor props
  • Anchor events
  • AnchorLink props

静态位置

不浮动,状态不随页面滚动变化。

<template>
    <Anchor :affix="false" 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>
</template>
<script>
    export default {
        
    }
</script>

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

iView UI

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品

iView UI目录

1.指南
2.组件
3.组件基础
4.组件布局