antd vue Anchor getContainer属性踩坑

最新推荐文章于 2024-08-22 12:40:40 发布
最新推荐文章于 2024-08-22 12:40:40 发布
阅读量4.5k 收藏
点赞数
文章标签： vue.js 前端 javascript antd vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2690656046/article/details/124667933
版权

antd Vue Anchor锚点踩坑

getContainer属性的坑

在这里插入图片描述

场景是我一个app1页面要使用app7页面当做组件，app7页面如下在这里插入图片描述

然后app1页面的增加是整个app7页面在这里插入图片描述

在这里插入图片描述

当使用getContainer属性指定容器的时候，我指定的是a-collapse也就是整个页面的容器，这时候有意思的来了，每点击一个锚点属性，后面的导航页就会增加一个，原因是需要规范下导航页wathc 增加页面的模式，我们这个是属于hash模式的#值，因此加个判断 ！newVal.hash就可以了

小笔记记下

success_on
关注
antd-design-vue踩坑
的博客
09-23 397
踩坑Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.]Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] Warning: [antdv: Each record
antd vue表单上传文件_vue+axios+antD的上传图片踩坑
weixin_39805998的博客
12-21 533
一开始使用了实验室大佬封装的axios结合formData进行图片上传，然而传递给后台的formData是空的,打印出来的form又确实是存在的，百度搜了一大推，于是借鉴了百度的做法。1.引入axios import axios from ‘axios‘;2.创建一个新的axios,const instance = axios.create({withCredentials:true //表...
ant design vue 锚点使用 Anchor 踩坑记录.pdf
12-16
ant design vue 锚点使用 Anchor 踩坑记录
记录 ant design vue anchor getContainer 使用
yangchao19920805的博客
10-05 1298
【代码】记录 ant design vue anchor getContainer 使用。
react antd drawer getContainer挂载到父组件类名
最新发布
u010234868的专栏
08-22 182
【代码】react antd drawer getContainer挂载到父组件类名。
antd中Drawer组件使用getContainer方法获取dom节点时初次获取到的是null问题完美解决
热门推荐
vuvivian的博客
04-21 2万+
/* eslint-disable no-console,react/no-multi-comp */ import Drawer from 'rc-drawer'; import React from 'react'; import ReactDom from 'react-dom'; import { Menu, Icon } from 'antd'; import 'antd/lib/st...
antdv 锚点踩坑
peppa_pig的博客
10-18 1372
背景：使用antd的锚点时，按照官方文档的用法配置之后发现锚点组件的锚点Title位置没办法随着我的页面滚动而变化，但是点击Title跳转具体锚定位置的功能却是没有问题的。解决方法：getContainer绑定滚动范围容器。
vue3.2 + antd vue3. 基于vue3.2 + antd vue3的后台管理系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/...
getContainer
sss12554的专栏
05-11 2934
public static WTContainer getContainer(String containerName) {         int[] index = { 0 };         try {             QuerySpec qs = new QuerySpec(WTContainer.class);             SearchCondition s...
antd Modal的getContainer设置为false，会导致Modal里面Select下拉框会随鼠标移动与下拉框分离
weixin_43177685的博客
06-16 5791
antd Modal中getContainer={false}设置之后，会导致Modal里面Select下拉框会随鼠标移动与下拉框分离 ru
tomcat启动(Ⅷ)--请求最终目的地 getContainer().getPipeline().getFirst().invoke(request, response)...
weixin_30251587的博客
11-14 265
当tomcat的Conector保存着StandardService实例，而StandardService保存着Container的实例 当Http11NioProcessor.process()方法内调用getAdapter.service(request,response)时会调用CoyoteAdapter.service() 上面会调用请求对应的container的方法。 在这之前有...
Antd Vue3 使用 Anchor 锚点组件记录
夢的点滴的博客
03-29 2398
Antd Vue3 Anchor 锚点组件踩坑记录：锚点定位失效，没有随着页面滚动高亮变化
vue3简单写导航anchor示例(支持点击高亮和滚动判断高亮)
qq_42750608的博客
11-02 872
vue3简单写导航anchor示例(支持点击高亮和滚动判断高亮)
antdV中Anchor 锚点总结
A_9888的博客
04-21 6083
<div :class="$style.title"> <a-anchor :get-container="getContainerBox" :affix="false" :target-offset="targetOffset" :class="$style.anchor" @click="handleAnchorClick" ...
React实践：React中使用antd anchor 锚点不跳转问题记录【已解决】
qq_40937541的博客
10-17 1857
在一个高度大于屏幕可视高度的页面，使用锚点定位到指定位置
Antd 遇到的问题
weixin_50236973的博客
09-23 576
【代码】Antd 遇到的问题。
vue3使用ant-design-vue的Modal的小技巧
Yosola的博客
04-26 6099
ant的modal挂载，移动
antd vue 注册页面
07-27
引用\[3\]: Ant-design-Vue是Ant Design唯一推荐的Vue UI组件库，实际上是Ant Design的Vue实现。组件的样式与Ant Design同步，组件的html结构和css样式一致。使用它，我们发现它可以称为VUE组件库和开发方案的少数完整集成项目之一。根据引用\[1\]和引用\[2\]的描述，当使用getContainer属性指定容器时，可以将整个页面的容器指定为a-collapse组件。这样，在点击锚点属性时，后面的导航页会增加一个。为了规范导航页的增加模式，可以在watch中加入判断条件，比如判断newVal.hash是否存在，如果不存在则不增加导航页。所以，如果你想在Ant Design Vue中注册页面，你可以使用Ant-design-Vue提供的组件和开发方案来实现。 #### 引用[.reference_title] - *1* *2* [antd vue Anchor getContainer属性踩坑](https://blog.csdn.net/a2690656046/article/details/124667933)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [antd适合vue使用吗,antd vue pro](https://blog.csdn.net/weixin_31299543/article/details/118119265)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值