项目内安装

npm i v-try-plugins

在文件内使用

// html
 <div id="resize" ></div>

//js

import useResize from 'v-try-plugins';
import { onMounted } from 'vue';

onMounted(() => {
  useResize(document.querySelector('#resize') as HTMLElement, (e: any) => {
    console.log(e);
  });
});

//css
<style lang="scss" scoped>
#resize {
  border: 1px solid #ccc;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
</style>

全局注册绑定为自定义指令

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import useResize from 'v-try-plugins';

createApp(App).use(useResize);

//.vue
<div v-resize="resize" id="resize"></div>
<script setup>
const resize = e => {
  console.log(e);
};
</script>

//css
<style lang="scss" scoped>
#resize {
  border: 1px solid #ccc;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
</style>