小程序vue3获取dom信息系统信息钩子封装

喜樂的CC

已于 2024-06-19 16:38:31 修改

阅读量267

点赞数 3

CC 4.0 BY-SA版权

文章标签：小程序 vue.js javascript

于 2024-06-19 16:36:54 首次发布

转载请注明出处链接, 谢谢合作.

本文链接：https://blog.csdn.net/qq_40259641/article/details/139807001

// useClient.js
import { ref, onMounted, onUnmounted } from "vue";

export function useClient() {
  //获取系统信息
  function getSystemInfo() {
    let data = {};
    uni.getSystemInfo({
      success: function (res) {
        data = res;
      },
    });
    return data;
  }

  // 获取dom信息
  function getDomInfo(selector, instance) {
    return new Promise((resolve, reject) => {
      let height = 0;
      let query = wx.createSelectorQuery();
      if (instance) {
        query = wx.createSelectorQuery().in(instance);
      }
      query
        .select(selector)
        .boundingClientRect((data) => {
          if (data) {
            resolve(data);
          }
        })
        .exec();
    });
  }

  return { getSystemInfo, getDomInfo };
}

使用示例:

// vue页面
<script setup>
import { useClient } from "@/utils/useClient";

// 当组件挂载完成后
let scrollHeight = ref(0);
onMounted(async () => {
    let myTabDom = await useClient().getDomInfo(".my_tab");
    scrollHeight.value = `100vh - ${ myTabDom.height }px`;
});

</script>