首页 > 其他分享 >vue-treeselect 被 overflow 遮挡

vue-treeselect 被 overflow 遮挡

时间:2023-07-05 14:44:25浏览次数:34  
标签:选项 vue 遮挡 下拉框 treeselect overflow

场景

在一个内容区域设置了 overflow 纵向滚动的对话框中,内部的 vue-treeselect 组件下拉框选项被遮挡了。

解决办法

vue-treeselect 设置 appendToBodyz-index 属性。

image

注意事项

设置了 appendToBody 后,下拉框选项的字号会变大。为了与原来的字号相匹配,需要修改样式。

找了一会儿在 app 中没找到它的下拉框选项类名。后来发现是在同级的位置。

image

全局修改样式
// vue-treeselect 组件选项全局样式设置
.vue-treeselect__portal-target.vue-treeselect .vue-treeselect__menu-container {
  font-size: 14px;
}

标签:选项,vue,遮挡,下拉框,treeselect,overflow
From: https://www.cnblogs.com/shayloyuki/p/17528457.html

相关文章

  • 在asp.net core中使用vue3+vite(起)
    前言一开始是一个自用的应用,原本是用razor写的。最近有了点新想法,加点新功能,但是我接触的项目基本都是vue+api的前后端分离,用这razor写的是真不习惯,最后决定还是用习惯的vue重写。之前尝试过在.netcore里使用vue2+webpack,毕竟实际上就是把.vue翻译成了.js来用,一个站点就能跑。......
  • 第八篇 - Vue路由跳转步骤
    第六篇讲了将SpringBoot和Vue项目结合起来,实现了使用Vue访问SpringBoot的API。这一篇我们介绍当访问API成功后跳转到新的Vue页面怎么处理。参考链接:https://zhuanlan.zhihu.com/p/468467076第一步:首先新建一个Vue页面 jump1test.vue/*eslint-disable*/<template><div......
  • 08:vue3 组件基础
    定义一个组件在components文件夹下新建MyComponent.vue组件 写入下面代码1<script>2exportdefault{3data(){4return{5count:06}7}8}9</script>1011<template>12<button@click="count++">我被点击了{......
  • 解决vue中mapbox地图显示一半的问题
    解决vue中mapbox地图显示一半的问题问题描述:在vue中创建mapbox地图,地图只显示一般,查看浏览器开发者工具。发现将canvas.mapboxgl-canvas的position:absolute去掉就解决了。代码修改:获取到canvas.mapboxgl-canvas,并修改其position样式就ok修改前代码:<template><main......
  • vue项目动态菜单import运行报错【转】
    Modulebuildfailed(from./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):TypeError:Cannotreadproperty‘range’ofnull 1.从git拉取的项目,下载依赖后就报Modulebuildfailed(from./node_modules/@vue/cli-plugin-eslint/node_modu......
  • vue项目报错:Node.js v18.16.1 error Command failed with exit code 1.
    原因:把node升级到了最新的长期支持版18.16.1,结果运行vue项目启动失败,报错如下:试了各种办法都解决不了,后面只能把node降级到16.20.1运行项目又可以启动了......
  • vue渲染原理简单实现
    实现功能:1.渲染系统:·功能一:h函数,用于创建并返回一个VNode(虚拟对象);·功能二:mount函数,用于将VNode挂载到节点上;·功能三:patch函数,用于对比两个VNode,决定该如何处理新的VNode;1.新建一个index.html的页面其中有一个id为app的div元素,之后我们写的所有DOM都会挂载到此元素......
  • Vue项目引入Bootstrap5步骤
    1、在工程项目下安装Bootstrap5依赖包[email protected]或者[email protected]、安装安装jqueryBootstrap有js函数,必须新引入jquerynpminstalljquery--save3、在vue.config.js配置jQuery插件的参数module.exports=......
  • Vue, Django | 数据可视化平台开发
    给公司搞了个互联网设备可视化平台,在地图上展示互联网设备的信息,点击地图不同区域,统计相应的设备信息,生成图表展示出来用的vue-big-screen框架,在原框架基础上,主要干了下面几件事:1.下载不同区域的geojson数据,点击大图的不同区域,调用mapclick方法,将子区域的geojson数据加载出来2......
  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览
    前端Vue自定义轮播图视频播放组件仿京东商品详情轮播图视频Video播放,可图片预览,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13325效果图如下:cc-videoSwiper使用方法<!--goodsData:轮播图视频数据 @setShowVideo:视频按钮点击事件-......