需求

实现一个函数同时支持自定义hooks和自定义指令, 去监听dom的宽高变化

5w3h 分析法

1. 如何监听dom的宽高变化
2. 如何用vite打包库
3. 如何发布到npm

安装

npm install --save v-resize-ys

使用方法

<template>
  <div class="box" id="resize">
    <p>这是一个可以被用户拖动调整大小的元素</p>
  </div>
</template>

<script setup lang='ts'>
  import useResize from 'v-resize-ys';
  import { onMounted } from 'vue';
  onMounted(() => {
    useResize(document.querySelector("#resize") as HTMLElement, (e: any) => {
      console.log(e)
    })
  })
</script>

<style scoped>
  #resize {
    width: 300px;
    height: 200px;
    background-color: aqua;
    resize: both;
    overflow: auto;
  }
</style>

<template>
  <div class="box" v-resize="onResize" id="resize">
    <p>这是一个可以被用户拖 </p>
  </div>
</template>

<script setup lang='ts'>
  const onResize = (e: any) => {
    console.log(e)
  }
</script>