arco.design vue Select组件滚动跟随问题

最新推荐文章于 2024-08-11 18:40:36 发布

ahh1005

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量854

点赞数 7

文章标签： vue.js javascript 前端 arco design

本文链接：https://blog.csdn.net/liyan_yanna/article/details/135460873

版权

文章讲述了在配置Select组件的trigger-props时遇到滚动跟随问题，通过调整popup-container属性为#app并移除trigger-props，解决了弹出层脱离滚动容器导致的问题。

摘要由CSDN通过智能技术生成

为select组件配置了trigger-props: {updateAtScroll: true}属性，下拉框还是不能实现滚动跟随，如图
在这里插入图片描述

后来，浏览这篇文章，发现可能是弹出层脱离了滚动容器，根据提示，使用 popup-container=“#app” 指定下弹出层的渲染位置后，不配置trigger-props也未出现问题

<Select
  :options="[]"
    placeholder="请输入"
    @change="(val) => handleBlur(val, 'imageStrategy')"
    popupContainer="#app"
  />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ahh1005

关注关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3 - Arco Design Vue 选择器 a-select 同时支持 “下拉选择和手动输入“，既能下拉框选择又可以像 input 一样输入文字内容，让Select选择器组件能选也能输入文字

王佳斌

07-03

1830

vue3，arco-design-vue，select选择器，a-select，实现可下拉选择和手动输入，arco组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，可选择可以手动输入，Vue3使用a-select下拉框实现可输入可选择，可新增输入可选择，vue3使用arco design vue选择器Select既可以下拉选择也可以手动输入，可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入框功能，最新教程，vue3中arco.design如何做到下拉框既有select功能

【在Arco Design Vue项目框架中进行复杂菜单路由跳转】

Clover ‘s Blog

01-05

1057

即：当我们点击全部订单后，看到table表格后，表格里面有订单详情和特殊操作按钮，然后这时候我们点击订单详情或者特殊操作的时候直接跳转到订单详情页面或则特殊操作页面，并且使用的方法不是显示隐藏，而是路由跳转。//这是router中的software全部的路由，就是在路由中补上特殊操作和订单详情的路由即可。因为我用了很多组件，都是组件套组件，所以大家有不清楚的欢迎可以直接私信或者留言🤭。先给大家进行描述一下吧，如果我的描述有误的话大家就直接看视频吧。一起试起来吧，不清楚的欢迎大家留言哦😄。

参与评论您还未登录，请先登录后发表或查看评论

关于el-select下拉框不跟随页面滚动问题

m0_54882260的博客

06-02

3244

关于el-select下拉框不跟随页面滚动

Arco Design Vue 组件库中同时使用＜a-popover＞和＜a-tooltip＞出现闪动问题

weixin_69580737的博客

07-14

787

force-render={true} 加了这条属性貌似没啥作用。

Arco Design for Vue 3 - 快速上手指南与实战技巧

最新发布

qq_42072014的博客

08-11

600

如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！

Arco Design Vue表格定位滚动到指定行及高亮显示

达瓦里氏的博客

11-01

705

通过while循环来找到所在行。为实现定位的效果,需要事先对。首先,上述效果分为两种情况。中渲染的某一列进行加工。我这里是给序号列附上了。直接添加到右表数组中。

arco.design的a-scrollbar 高度100% 不生效

J_1999_0524的博客

07-17

244

arco的a-scrollbar 高度100% 不生效

解决react + ant-design中Select下拉框分离随页面滚动问题

07-12

1387

这个归根结底大概是ant-design中Select组件没有找到正确的父节点。很多方法试了并没有成功，最后用下面的方法解决了这个bug。1、在Select组件标签内添加getPopupContainer属性： 2、在的上一层用包裹

popup 弹窗出现，禁止页面滚动条

weixin_52492583的博客

12-28

1123

弹窗出现，禁止页面滚动条，但是弹窗滚动条依旧可以使用。

arco design 中select下拉框值为对象选中的问题

songshao001的博客

07-06

1175

arco design 中select下拉框值为对象选选不中问题，既每次选中都是全选的问题

ant design vue模态框中下拉滚动样式分离解决方法

m0_61557696的博客

11-16

1036

鼠标滚动时候，文本框和下拉选项会分离，解决方法 1 2 3 4 //日期样式加入属性 :getCalendarContainer="(triggerNode)=>{returntriggerNode.parentNode}" //其他样式加入属性（下拉框，级联选项、树选择等） :getPopupContainer="(triggerNode)=>{returntriggerNode.paren...

popup-container:您内容的简单弹出容器

05-14

弹出容器使用jQuery的内容的简单弹出容器用法导入jQuery库（我使用的是jquery-1.10.2版本）和libs.js < script type =" text/javascript " src =" libs.js " > </ script > 加载样式表（弹出样式表和Font-Awesome）。在这种情况下，我从装字体-真棒版本4.4.0 通过或者你可以下载字体，真棒和负载在本地而不是。 < link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css " > < link rel =" stylesheet " type =" text/css " href =" style.css " /> 创建您的“容

Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

12-13

最近做的一个项目是基于 vue + AntDesign 的。由于项目要求，需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下：在线演示地址>> 首先新建一个Table组件的实例： <a> { return ...

Ant Design Vue Select 选择器隐藏下拉菜单

qwe122343的博客

04-20

4920

根据业务需求，不想让下拉框展示出来，本想自己修改样式原来 Ant Design Vue 已经为我们写好，使用参数 open 即可，可控制是否展开下拉菜单 :open="false" <a-select mode="multiple" v-model:value="formState.name4" class="formLength" placeholder="请点击选择按钮" :open="false" > ...

关于select的横向滚动条

leafe920的专栏

11-15

3877

写了一个弹出框是一个table 只有一tr 第一个td是填选择条件然后在第二个td里面展示第二个td里面是一select 是一个设置了size的下拉框，也就是说选项是显示出来的不用下拉 Java代码 'gongcheng' size='10' name='gongcheng' > .....

WindowsPhone 7 定制控件 - 可重用的弹出框容器（PopupContainer）

jazywoo_在路上

03-30

1186

开发 WindowsPhone 7 应用程序时，我们经常需要弹出一个对话框（Popup Dialog）来向用户提示一些信息，或向用户索取输入信息。相比于完全导航（Navigate）到一个新的界面，半遮掩式的弹出窗口显得更加轻便（Lightweight），也提供更加紧凑的交互上下文环境（Interaction Context）。这一点尤其适用于那些些内容相对简单、控件数量相对较少的界面。然而

Arco 属性

虎康的博客

12-27

3131

为解决产品中的体验问题, 同时促进设计部门和研发部门之间协作, 本系统选择ArcoDesign作为开发者之间沟通的语言框架，使用vue3+TS结合的模式进行开发。线宽端点类型拐角类型spin是否旋转size尺寸。

Arco Design 可编辑表格验证

长歌的博客

08-04

4321

表单嵌套可编辑表格，表格验证

arco.design 利用 a-input-search 和 a-trigger 自己实现一个关键字查询select

weixin_45152848的博客

06-26

341

问题：triggerContent 的宽度需要和 trigger 的宽度保持一致。属性，此属性在官方文档中并未书写，但看源码可以找到这个属性，其功能正好适合此场景。解决：利用正则实现，PlaceColorName.js 组件实现如下。问题：如何实现在搜索大悦时，西单大悦城中大悦二字标黄。

vue3右键菜单组件固定在arco.design表格内部

05-31

要将vue3右键菜单组件固定在arco.design表格内部，可以使用以下步骤： 1. 首先，在arco.design表格的外层包裹一个相对定位的 div 元素，这个 div 元素的高度和宽度要与表格相同。 2. 在这个 div 元素内部添加一个绝对定位的 div 元素，这个 div 元素的高度和宽度也要与表格相同。 3. 在这个绝对定位的 div 元素内部添加右键菜单组件。 4. 为这个绝对定位的 div 元素添加一个事件监听器，当鼠标右键点击时，显示右键菜单组件。 5. 在右键菜单组件的样式中，设置 position: fixed，这样右键菜单组件就可以固定在表格内部。下面是一个示例代码： ```html <template> <div class="table-container"> <div class="table-wrapper"> <a-table>  </a-table> <div class="context-menu" v-show="showMenu" @click="handleMenuClick">  </div> </div> </div> </template> <script> export default { data() { return { showMenu: false, menuX: 0, menuY: 0 }; }, mounted() { document.addEventListener("contextmenu", this.handleContextMenu); document.addEventListener("click", this.handleMenuClose); }, beforeUnmount() { document.removeEventListener("contextmenu", this.handleContextMenu); document.removeEventListener("click", this.handleMenuClose); }, methods: { handleContextMenu(e) { e.preventDefault(); this.menuX = e.clientX; this.menuY = e.clientY; this.showMenu = true; }, handleMenuClose() { this.showMenu = false; }, handleMenuClick() { // 处理右键菜单的点击事件 } } }; </script> <style> .table-container { position: relative; height: 400px; /* 表格高度 */ width: 100%; /* 表格宽度 */ } .table-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .context-menu { position: fixed; top: 0; left: 0; z-index: 999; /* 右键菜单的样式 */ } </style> ``` 在这个示例中，我们使用了一个外层的相对定位的 div 元素来包裹arco.design表格，然后在这个 div 元素内部添加了一个绝对定位的 div 元素，将右键菜单组件放在这个 div 元素内部。在右键菜单组件的样式中，设置了 position: fixed，这样右键菜单组件就可以固定在表格内部了。我们还为这个绝对定位的 div 元素添加了一个事件监听器，当鼠标右键点击时，显示右键菜单组件。