Antd vue a-anchor 锚点笔记

一定要设置容器，容器要设置容器的样式

ui组件API地址：Anchor 锚点
参考链接：antdV中Anchor 锚点总结
（参考链接写的已经非常详细了，该文章仅作为个人笔记）

封装锚点为子组件

锚点作为子组件时，容器一定是在父级的，给父级加上ref属性（通过vue实例的$refs属性拿到父级的dom元素）。

父级需要注意的地方：
1、绑定“容器”的元素尽量是最外层，不要太深

<template>
  <div class="容器样式" ref="容器">

2、父组件向子组件传递“容器”的参数

// html
// Anchor为自己注册的组件名称，想叫什么叫什么
<Anchor :getContainerBox="父组件传参方法"></Anchor> 
// js
父组件传参方法() {
    return this.$refs.容器
},
//css less scoped
.容器样式 {
  flex: 1;
  box-sizing: border-box;
  height: calc(100vh - 50px);
  margin: 5px 0;
  padding: 0 15px;
  overflow: auto;

  :global {
    .ant-form .ant-form-item {
      margin-bottom: 10px;
    }
  }
}

Anchor 锚点子组件中：

// html
<a-anchor :get-container="接收父组件传值">
// js
props: {
    接收父组件传值: {},
  },
// 获取容器的代码

总结：
1、Anchor作为子组件，获取容器的方法是不能写在组件内部的，要从父级传值获取。
2、加上容器样式，基本就能实现API中展示效果

本文内容只适用于已经写完代码但没实现效果的小伙伴

由于其他原因，方法名称等，只能用中文代替。如有疑惑请私信我。