resizer-vue3

介绍

适用于 vue3 的自定义指令，用来实现一个元素的宽高与另一个元素的宽高同步

安装

npm install resizer-vue3

使用

import resizer from 'resizer-vue3'

const app = createApp(App)
app.use(resizer)

<!-- 设置 iframe 元素的高度 -->
<iframe v-resizer src="/about" frameborder="0"></iframe>

<!-- 设置普通元素的高度 -->
<div v-resizer="{targetSelector: '.custom-class-name', observerProperty: 'all'}">
    <h1>hahaahaha</h1>
</div>

！！！注意：如果指令使用在 iframe 元素上时，查找 targetSelector 从 iframe 内部查找，其他元素在当前 window.document 中查找，查找元素使用的 api 为 querySelector , 所以注意 targetSelector 重复问题。

配置项

配置项 | 类型 | 是否必填 | 默认值 | 描述 -|-|-|-|- targetSelector|string|false|#resizer|参考的元素 observerProperty|'width'|'height'|'all'|false|'height'|需要同步的属性，分别为：宽、高、同时同步宽高