【Vue3+Ts project】认识 @vueuse/core 库

目标:

根据屏幕宽度改变 实现动态获取盒子的宽度
 

目录

目标:

一、javascript实现

二、@vueuse/core 库实现

---

一、javascript实现

1.首先 window.innerWidth 获取当前屏幕宽度，然后将 盒子宽度 除 375 乘 当前屏幕宽度

150 / 375 * window.innerWidth

2.将获取的动态盒子宽度赋值给 一个变量

import { ref } from 'vue';

const width = ref(0)
width.value = 150 / 375 * window.innerWidth

3.将获取盒子逻辑代码封装函数 并在进入页面后组件加载结束后执行，然后将宽赋值给swipe标签 :width="width"

import { onMounted, ref } from 'vue';

const width = ref(0)

const SwipeWidth = () => width.value = 150 / 375 * window.innerWidth
onMounted(() => {
    SwipeWidth()
})

这里在进入页面 或 刷新页面 后是实现了。但是在开发过程中 拉动屏幕宽度是没有改变的

4.使用 resize事件 当屏幕改变时就执行 封装逻辑代码函数，最后在组件销毁 也就是组件被DOM 移除时清除

代码

二、@vueuse/core 库实现

1.下载 @vueuse/core库到开发者依赖

npm install -D @vueuse/core
或
yarn add @vueuse/core
或
pnpm add @vueuse/core

2.引入 useWidthSize 引从他对象内拿到 width,然后swipe标签使用

3.最后也是非常重要的 ，拿到当前屏幕宽度，这里当前屏幕宽度就是 useWidthSize 解构出来的 width ，然后 盒子宽度 除 375 乘 当前屏幕宽度,完成