【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()
})

<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

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

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

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const width = ref(0)

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

    window.addEventListener('resize', () => {
        console.log(window.innerWidth);
    })
})

onUnmounted(()=>{
      window.addEventListener('resize', SwipeWidth)
})

</script>


<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

代码

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const width = ref(0)

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

    window.addEventListener('resize', () => {
        console.log(window.innerWidth);
    })
})

onUnmounted(()=>{
      window.addEventListener('resize', SwipeWidth)
})

</script>


<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

二、@vueuse/core 库实现

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

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

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

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
</script>

<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

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

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
</script>

<template>
<van-swipe :loop="false" :show-indicators="false" 
:width=" 150 / 375 * width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>