README
v-resize-observer
Resize observer for Vue.
检测DOM元素的尺寸变化。
support IE9+/Edge/chrome/safari/Firefox
Documents
Install
npm install v-resize-observer
Usage
- 全局引入方式
import ResizeObserver from 'v-resize-observer'
vue.use(ResizeObserver)
- 仅引入指令方式
directive
import resizeDirective from 'v-resize-observer/src/directive'
export default {
directives: {
resize: resizeDirective
}
}
- 仅引入组件方式
component
import ResizeComponent from 'v-resize-observer/src/component'
export default {
components: {
ResizeObserver: ResizeComponent
}
}
🚨 提醒:
如果是按需引入指令或组件,则必须在vue.config.js
中配置transpileDependencies
属性
默认情况下babel-loader
会忽略node_modules
中的所有依赖文件,如果想显示转换一个依赖模块,则必须将它添加到transpileDependencies
选项中。module.exports = { transpileDependencies: [ /[/\\]node_modules[/\\]v-resize-observer[/\\]/ ] }
使用指令 directive
支持
1.全局引入
和2.指令引入
方式
<div v-resize="hanldResize" />
<div v-resize:debounce="hanldResize" />
<div v-resize:debounce.200="hanldResize" />
<div v-resize:throttle="hanldResize" />
<div v-resize:throttle.200="hanldResize" />
使用组件 component
支持
1.全局引入
和3.组件引入
方式
<ResizeObserver @resize="hanldResize">
<div></div>
</ResizeObserver>
<ResizeObserver limiter="debounce" :wait="150" @resize="hanldResize">
<div></div>
</ResizeObserver>
function hanldResize({ width, height }, target) {
console.log(`width: ${width}, height: ${height}`)
}
API
Property | Type | Default | Description |
---|---|---|---|
target | Element | - | DOM Element |
disabled | boolean | false | |
limiter | function | - | Limit the rate of resize change events |
wait | number | 150 | The rate limit wait time |
resize | function | - | Trigger when child node resized |
Development
npm install
npm run dev
License
v-resize-observer
is released under the MIT license.