【Vue】Antd Affix a-affix 固钉组件，宽度未随父容器宽度变化

最新推荐文章于 2023-03-09 09:54:29 发布
最新推荐文章于 2023-03-09 09:54:29 发布
阅读量666 收藏
点赞数 1
分类专栏： Vue 文章标签： 前端 vue antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/128824348
版权

演示Demo：https://codepen.io/iuukai/pen/KKBGpxJ

在使用 <a-affix> 组件时，发现，当元素 fixed 脱离文档流后，其宽度并不会随着父容器的宽度一同变化，而是固定死的。只有当滚动条返回顶部，取消 fixed 时，才会随父宽度变化

在这里插入图片描述

后来发现，只需要给 <a-affix> 元素一个 width: 100% 即可解决问题

在这里插入图片描述

iuukai
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 组件篇 Affix
秋来九月八
04-20 1282
Affix是一种常用于前端界面设计的组件，它可以让网页元素固定在页面中的某个位置，随着用户的滚动而保持不变。通常用于固定导航栏、侧边栏等。通过设置相应的CSS样式和JavaScript代码，我们可以轻松地实现Affix组件的效果。Affix可以增强网页的用户体验，让用户在页面滚动时能够方便地访问重要的导航链接或信息，提高页面的可用性。
探索Vue Affix：让滚动固定更轻松
最新发布
gitblog_00050的博客
04-20 378
探索Vue Affix：让滚动固定更轻松 项目地址:https://gitcode.com/eddiemf/vue-affix Vue Affix 是一个基于 Vue.js 的轻量级组件，用于实现页面滚动时元素的固定定位效果，类似于CSS中的position: sticky。它提供了一种简单、可定制的方式来为你的Vue应用添加高级的布局功能。 项目简介 Vue Affix旨在解决在Vue项目中创建...
vue-affix:一个Vue.js插件，可在基于相对元素滚动时在窗口上附加元素
05-06
根据相对元素在屏幕上粘贴元素 与其他插件不同，此Vue 2组件将使其易于在滚动时附加任何元素。 基于相对元素附加元素 只需要3个超级简单的配置步骤 调度事件以进行词缀跟踪 没有依赖关系 确保检查以了解其工作原理！ 安装 首先使用以下命令安装它： npm install --save vue-affix 或者 yarn add vue-affix 然后，您可以将其用作插件： import Affix from 'vue-affix' ; Vue . use ( Affix ) ; 或者您可以将其用作组件（请注意大括号）： import { Affix } from 'vue-affix' ; export default { components : { Affix , } , } ; 或者，如果您希望将其包含在script标签中，只需包含位于dist文件夹中
分享一个vue固钉组件
qq_37350725的博客
04-13 1154
前沿
vue2封装Affix组件实现固定
前端程序猿的博客
03-09 972
API。
vue 固钉
qq_48228724的博客
04-01 504
挂载添加事件 mounted(){ window.addEventListener('scroll', this.suspension); }, destroyed(){ window.removeEventListener("scroll",this.suspension); }, 挂载的函数 suspension(){ this.domTop=document.documentElement.scrollTop ||
antd的a-affix切换标签页样式错位问题解决
guochiscoding
11-12 1509
问题描述 我们在满足需要操作吸顶的需求，通常会用到a-affix。这个antd组件可以很方便的满足我们的需求。只要在需要吸顶的部分使用这个组件，并指定容器（详见antd文档=>api=>target)就可以正常使用。但是组件有点小bug，这个bug还蛮容易复现的。我们在切换页面时，会发现affix组件溢出了原容器。官方对此的回答： 发现问题解决方案 这个时候可以发现，当页面开始滚动，则溢出的部分就会恢复正常 解决问题代码 结合上面的想法，我们在页面active的时候，把容器滚动1
antd-mobile-vue:antd-mobile的vue实现
05-17
如有问题可添加个人微信（wuhao1200），欢迎共同交流该项目原本为公司内部项目，现放到github上开源，发布个时候项目名称改为antd-mobile-vueantd-mobile-vue基于 Vue 的组件库，代码由antd-mobile转为Vue版本，目前...
antd-mobile-vue3.0:适用于vue 3.0的ant mobile
04-06
本项目是在本人之前移植的antd-mobile-vue的基础上使用vue3+vite2进行了改造，目前绝大部分组件都可以正常使用如有问题可添加个人微信（wuhao1200），欢迎共同交流antd-mobile-vue基于 Vue3 的组件库，代码由antd-...
vue的props实现子组件随父组件一起变化
09-01
本篇将详细介绍如何通过`props`实现子组件随父组件一起变化。 首先，让我们理解什么是`props`。`props`（Properties）是Vue组件中的一种特性，允许父组件将数据传递给子组件。这些属性是只读的，子组件不应该修改...
使用Vue指令快速的钉住某个元素
08-10
使用 Vue 指令快速的 “钉”住某个元素，移植于 jQuery.pin
vue-antd-admin：:ant:Ant Design Pro与Vue的实施
02-06
简体中文|Vue Antd管理员的Vue实现版本开箱即用的中后台前端/设计解决方案多种主题模式任选：预览地址： : 使用文档： : 常见问题： ://iczer.gitee.io/vue-antd-admin-docs/start/faq.html国内知名： ://gitee....
vue-antd-mobile
05-13
vue-antd-mobileAnt Design mobile of Vue实现基于组件库样式使用Install 安装正在开发中...This module is still working in progress right now, so it is just for placeholder.Usage 使用Develop 开发build 打包...
Vue项目吸顶(固钉)操作实例
JerryBro的博客
03-07 2453
主页.vue 要点： vue中不要操作Dom来获取元素，这里用ref属性来替代Dom获取元素。 this.$ refs.myswiper.$el ：获取标签上标有属性ref='myswiper’的元素 this. $ refs.myswiper.$el.offsetHeight ：表示该轮播swiper元素的高度 document.documentElement.scrollTop： 表示屏幕...
antd vue 位置变动 固钉消失_组件之路---固钉组件
weixin_32115711的博客
12-23 595
固钉组件的作用是将页面元素固定在可视区域之内。恩！是这样需求固钉的基本功能就是将元素固定在页面的特定位置，即使存在滚动条的情况下，固钉元素仍然可以固定在设定的位置。这里位置固定所指的参考有两种情况：元素相对窗口固定位置。元素相对于父容器固定位置。常规情况下，我们使用的是元素相对于窗口位置固定，这里直接使用fixed布局就可以了，但是对于第二种需求就不容易实现了，这也是固钉组件主要实现的功能。预备知...
antd vue 位置变动 固钉消失_使用vue封装固钉Affix组件，滚动条到底部时自动吸附，离开底部时自动相对窗口固定...
weixin_29095049的博客
12-23 599
@click="$router.go(-1)">返回export default {name: 'Affix',props: {},data () {return {}},mounted () {window.addEventListener('scroll', this.handleScroll)},methods: {handleScroll (e) {if (document.docu...
vue固钉及滚动式返回顶部的实现
m0_61686921的博客
04-13 1324
所谓固钉，就是页面向下滚动时，可以将元素固定在可视区域内，所谓回到顶部顾名思义就是一个回到顶部的按钮，效果可以参考elementui中Affix 固钉组件和Backtop 回到顶部，但是想成为一名优秀的前端工程师，会用必然是不够的，我们还要学会怎么实现。 固钉： 首先当然是需要有一个元素,因为vue中可以通过v-bind指令绑定class灵活的改变元素样式，因此也方便我们实现 <div class="minor-header" :class="{ sticky_element: isVisib
关于Antd的Affix突然不好用了，或者Window的scroll监听不好用了
11-08 1750
不要给body加上 overflow: hidden; overflow: auto; overflow-x: hidden; 等属性
vue-affix 动态更改offset
06-03
要动态更改 vue-affix 的 offset，你可以使用 `$refs` 来获取 affix 组件实例，并通过设置 `offset` 属性来更新 offset 值。具体步骤如下： 1. 在 affix 组件上加上 `ref` 属性： ```html <affix ref="myAffix" :offset="offset"> <!-- affix 内容 --> </affix> ``` 2. 在 Vue 实例中获取 affix 组件实例： ```js export default { data() { return { offset: 100 // 初始 offset 值 } }, mounted() { this.affix = this.$refs.myAffix }, methods: { updateOffset() { // 更新 offset 值 this.offset = 200 // 更新 affix 组件的 offset this.affix.updateAffix() } } } ``` 3. 在需要更新 offset 的时候，通过调用 `updateAffix` 方法来更新 affix 组件的 offset 值。 注意：在更新 offset 值后，需要手动调用 `updateAffix` 方法来更新 affix 组件的状态。如果不调用此方法，affix 组件的位置将不会更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值