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>