一定要设置容器,容器要设置容器的样式
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中展示效果
本文内容只适用于已经写完代码但没实现效果的小伙伴
由于其他原因,方法名称等,只能用中文代替。如有疑惑请私信我。