1.0.1 • Published 11 months ago

resizer-vue3 v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

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 重复问题。

配置项

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

11 months ago

1.0.0

11 months ago