vue获取元素属性

简介: vue获取元素属性
<template>
      <van-sticky id="stickyID" ref="stickyRef" :offset-top="stickyOffsetTop"/>
</template>
<script setup lang="ts">
  const stickyOffsetTop = ref();
  
  const stickyRef = ref();
  const stickyID = ref();
  
  onMounted(() => {
    const navBarHeight = parseInt(
      getComputedStyle(document.documentElement).getPropertyValue(
        "--van-nav-bar-height"
      ),
      10
    );
    const searchPadding = parseInt(
      getComputedStyle(document.documentElement).getPropertyValue(
        "--van-search-padding"
      ),
      10
    );
    const searchInputHeight = parseInt(
      getComputedStyle(document.documentElement).getPropertyValue(
        "--van-search-input-height"
      ),
      10
    );
    const elementID = document.getElementById("stickyID");
    const elementRef = stickyRef.value.$el.offsetHeight;
    stickyOffsetTop.value = navBarHeight + elementID.offsetHeight;
    console.log(elementID.offsetHeight);
    console.log(elementRef);
  });
<script>

使用vant css变量

<div style="display: flex; align-items: center; margin: 0">
  <van-checkbox v-model="checked" :key="index" style="margin: 0" />
  <p
    style="
       {
        display: flex;
        margin: var(--van-card-padding);
      }
    "
  >
    店铺名 >
  </p>
</div>
目录
相关文章
|
4天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
5天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
15 3
|
5天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
17 2
|
5天前
|
JavaScript
vue学习(11)键盘事件
vue学习(11)键盘事件
19 2
|
4天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
9 0
|
4天前
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
|
8天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
40 11
|
8天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
197 65
|
8天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
196 62
|
7天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
24 10