v-resize-observer

Resize observer for Vue.

Usage no npm install needed!

<script type="module">
  import vResizeObserver from 'https://cdn.skypack.dev/v-resize-observer';
</script>

README

v-resize-observer

Resize observer for Vue.
检测DOM元素的尺寸变化。

support IE9+/Edge/chrome/safari/Firefox

Documents

查看文档Documents

Install

npm install v-resize-observer

Usage

  1. 全局引入方式
import ResizeObserver from 'v-resize-observer'

vue.use(ResizeObserver)
  1. 仅引入指令方式 directive
import resizeDirective from 'v-resize-observer/src/directive'

export default {
  directives: {
    resize: resizeDirective
  }
}
  1. 仅引入组件方式 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.