Anchor 锚点

特性

1. 可根据页面中指定的 class 自动生成导航锚点
2. 支持传入 anchorLinks 手动配置锚点
3. 支持将锚点面板固定到页面一侧
4. 可点击按钮折叠/展开锚点面板
5. 基于 vue2 版本封装，强依赖于 element-ui
6. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。

基本用法

使用 anchorLinks 手动配置锚点

<template>
  <div>
    <niuka-anchor :anchorLinks="anchorLinks" :fixed="false"></niuka-anchor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      anchorLinks: [
        { label: '特性', link: '特性' },
        { label: '基本用法', link: '基本用法' },
        { label: '自动生成', link: '自动生成' },
        { label: '固定到屏幕', link: '固定到屏幕' },
        { label: 'NiukaAnchor Attributes', link: 'niukaanchor-attributes' },
        { label: 'Anchor Attributes', link: 'anchor-attributes' },
      ],
    };
  },
};
</script>

隐藏源代码

自动生成

通过 query 配置生成锚点容器筛选条件，自动生成锚点

<template>
  <div>
    <niuka-anchor query="h2" :fixed="false"></niuka-anchor>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

隐藏源代码

固定到屏幕

通过配置 fixed 可以实现把面板固定到屏幕

<template>
  <div>
    <el-button @click="fixed = !fixed">
      {{ fixed ? '取消固定' : '固定到屏幕' }}
    </el-button>
    <niuka-anchor query="h2" :fixed="fixed"></niuka-anchor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fixed: false,
    };
  },
};
</script>

隐藏源代码

NiukaAnchor Attributes

Anchor Attributes