antd vue Anchor getContainer属性踩坑

最新推荐文章于 2025-02-14 16:49:31 发布
最新推荐文章于 2025-02-14 16:49:31 发布
阅读量4.8k 收藏
点赞数
文章标签： vue.js 前端 javascript antd vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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 441
踩坑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
Antdesign-Vue中抽屉的使用
weixin_49203377的博客
05-17 7202
背景 项目中使用antdesign里面的抽屉组件，想让抽屉在指定的容器内显示，而抽屉组件默认的挂载点是body 解决办法 根据antdesign官方文档 api里getContainer可以指定Drawer挂载的HTML节点 可以通过ref或者class名或者id名挂载到对应的html节点 如果挂在之后发现抽屉或者遮罩层的位置不对 一定要注意要挂载的那个dom节点是否给了相对定位，要挂载的dom节点给相对定位之后，抽屉就能在指定的dom节点内出现了（这里要注意相应的样式的调整） 下图是内部抽屉样式 还
ant design vue 锚点使用 Anchor 踩坑记录.pdf
12-16
ant design vue 锚点使用 Anchor 踩坑记录
getContainer 是 Ant Design 中重要属性
最新发布
MYG_G
02-14 605
getContainer 是 Ant Design 中的一个重要属性，用于自定义组件（如 Modal、Drawer 等）的挂载位置。默认情况下，这些组件会被挂载到 document.body 下，但这种行为可能会导致一些问题，例如被父级元素的 overflow: hidden 裁剪，或者在滚动时无法跟随页面滚动。 getContainer 的主要作用是允许开发者自定义组件的挂载容器，从而解决默认挂载行为可能带来的问题。它通过返回一个 DOM 节点，使得组件能够渲染到指定的容器中。
记录 ant design vue anchor getContainer 使用
yangchao19920805的博客
10-05 1689
【代码】记录 ant design vue anchor getContainer 使用。
react antd drawer getContainer挂载到父组件类名
u010234868的专栏
08-22 482
【代码】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 1840
背景：使用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 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/...
vue-container
a18861856219的博客
09-19 602
在Vue应用中，尤其是在使用CSS框架（如Bootstrap、Tailwind CSS等）时，"container"可能指的是布局中的一个特定类，用于定义页面的最大宽度并提供内边距，以便在不同屏幕尺寸上提供一致的布局。：虽然这不是直接关于HTML元素的"container"，但在使用Vuex进行状态管理时，你可能会遇到将Vuex的store视为"状态容器"的说法。然而，在Vue项目的上下文中，"container"这个词通常用于描述几种不同的概念，具体取决于它是如何被使用的。
getContainer
sss12554的专栏
05-11 2977
public static WTContainer getContainer(String containerName) {         int[] index = { 0 };         try {             QuerySpec qs = new QuerySpec(WTContainer.class);             SearchCondition s...
Antd Vue3 使用 Anchor 锚点组件记录
夢的点滴的博客
03-29 4071
Antd Vue3 Anchor 锚点组件踩坑记录：锚点定位失效，没有随着页面滚动高亮变化
antdv 下拉框设置getPopupContainer无效 ，页面滚动还是不跟随页面滚动解决方案
qq_45919348的博客
12-12 4382
设置完getPopupContainer之后，组件还是不会随着页面滚动，因为getPopupContainer设置的是绝对定位absolute，还需要在组件所要依赖的父元素上设置相对定位relative。例如ant d 的popoconfirm 或者Popover 组件，都有一个getPopupContainer参数，可以控制组件的在指定的组件下，getPopupContainer可以有多中写法
antd Modal的getContainer设置为false，会导致Modal里面Select下拉框会随鼠标移动与下拉框分离
weixin_43177685的博客
06-16 5930
antd Modal中getContainer={false}设置之后，会导致Modal里面Select下拉框会随鼠标移动与下拉框分离 ru
tomcat启动(Ⅷ)--请求最终目的地 getContainer().getPipeline().getFirst().invoke(request, response)...
weixin_30251587的博客
11-14 286
当tomcat的Conector保存着StandardService实例，而StandardService保存着Container的实例 当Http11NioProcessor.process()方法内调用getAdapter.service(request,response)时会调用CoyoteAdapter.service() 上面会调用请求对应的container的方法。 在这之前有...
vue3简单写导航anchor示例(支持点击高亮和滚动判断高亮)
qq_42750608的博客
11-02 1024
vue3简单写导航anchor示例(支持点击高亮和滚动判断高亮)
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、付费专栏及课程。

余额充值