更新记录
0.0.4(2024-07-25)
下载此版本
0.0.2(2023-08-17)
下载此版本
0.0.1(2023-08-17)
下载此版本
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.7 app-vue app-uvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
lime-resize 监听元素尺寸变化
- 当插件包裹的文档流或插件所在的文档流尺寸发生变化时,触发 size 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化,重新获取 dom 尺寸和位置,进行内容展示的计算操作。
使用
监听父级
- 文档流包裹
resize
插件时并且文档是设置相对定位position: relative;
,当dom变化后会触发插件的@resize
事件。
<view class="parent" style="position: relative; ">
<l-resize @resize="handleResize"></l-resize>
</view>
监听子级
- 插件包文档流时,当dom变化后会触发插件的
@resize
事件。不要给此插件增加任何外部样式
<l-resize @resize="handleResize">
<view class="child"></view>
</l-resize>
插件标签
- 默认 l-resize 为 component
- 默认 lime-resize 为 demo
-
关于vue2的使用方式
- 插件使用了
composition-api
, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可.
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
另外插件也用到了TS,vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript
目录
// \HBuilderX\plugins\compile-typescript
yarn add typescript -D
- or -
npm install typescript -D
常见问题
- 不支持 nvue,在nvue中元素缩小了也不能正常拿到尺寸,这就让人无语了。
API
Events
参数 |
说明 |
参数 |
resize |
尺寸发生变化时触发 |
event.detail = { width: number, height: number, top: number, right: number, bottom: number, left: number } |