Vue 获取/设置指定组件高度

'split-pane-left-area’是要获取的组件class,可以通过浏览器F12调试,在样式页面查看class信息

目的:将div的高度设置和split-pane-left-area 组件的高度一致

  1. 动态绑定style
<div  :style="{height: listHeight+ 'px'}">
  1. 获取元素高度:通过document.getElementsByClassName,offsetHeight属性即为页面组件的高度
<div  :style="{height: listHeight+ 'px'}">

data() {
        return {
            listHeight: 565,
        };
    },

mounted() {
        // 动态绑定审核方案列表高度,确保显示不会超出页面范围
        if (document.getElementsByClassName('split-pane-left-area')[0].offsetHeight) {
            this.listHeight = document.getElementsByClassName('split-pane-left-area')[0].offsetHeight - 30;
        }
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 中设定 ArcGIS 3D 地图的范围并指定高度,可以使用 ArcGIS API for JavaScript 中的 `View` 对象的 `extent` 属性和 `constraints` 属性。 首先,在 Vue 组件中引入 ArcGIS API for JavaScript 的模块: ```javascript import MapView from '@arcgis/core/views/MapView'; import Extent from '@arcgis/core/geometry/Extent'; import SpatialReference from '@arcgis/core/geometry/SpatialReference'; ``` 然后,在组件的 `mounted` 钩子中创建一个 `MapView` 对象,设定地图的范围和高度: ```javascript mounted() { const mapContainer = this.$refs.mapContainer; // 获取地图容器的引用 const initialExtent = new Extent({ xmin: -118.80500, ymin: 33.70300, xmax: -118.15500, ymax: 34.32800, spatialReference: new SpatialReference({ wkid: 4326 }) }); // 创建一个范围对象,指定地图的经纬度范围 const mapView = new MapView({ container: mapContainer, map: this.map, extent: initialExtent, // 设置地图的范围 constraints: { altitude: { min: 20000, // 设置地图的最小高度 max: 100000 // 设置地图的最大高度 } } }); // 创建一个地图视图对象 } ``` 在上面的代码中,我们首先通过 `this.$refs.mapContainer` 获取地图容器的引用,然后创建一个 `Extent` 对象,指定地图的经纬度范围。接着,我们创建一个 `MapView` 对象,将其绑定到地图容器上,并设置地图的范围和高度的约束。在 `constraints` 属性中,我们指定了地图的最小高度和最大高度。 注意,上面的代码中的 `this.map` 是一个 ArcGIS 3D 地图对象,你需要在组件中创建并初始化它。具体的操作可以参考 ArcGIS API for JavaScript 的官方文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值