v-resize

简介

v-resize 指令用于检测元素是否发生了尺寸变化。

示例

v-resize="handler"

当前尺寸: 315px

v-resize.debounce="handler"

当前尺寸: 315px

v-resize.throttle.500="handler"

当前尺寸: 315px

v-resize="{mode: 'throttle', handler}"

当前尺寸: 315px

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-button
      @click="randomSize"
    >
      调整尺寸
    </veui-button>
    <div
      ref="demo"
      v-resize="updateSize"
      class="demo"
      :style="`width: ${size}px`"
    >
      v-resize="handler"
    </div>
    <p>当前尺寸: {{ caughtSize }}px</p>
    <div
      ref="demo1"
      v-resize.debounce.leading="updateSize1"
      class="demo"
      :style="`width: ${size}px`"
    >
      v-resize.debounce="handler"
    </div>
    <p>当前尺寸: {{ caughtSize1 }}px</p>
    <div
      ref="demo2"
      v-resize.throttle.500="updateSize2"
      class="demo"
      :style="`width: ${size}px`"
    >
      v-resize.throttle.500="handler"
    </div>
    <p>当前尺寸: {{ caughtSize2 }}px</p>
    <div
      ref="demo3"
      v-resize="{mode: 'throttle', handler: updateSize3}"
      class="demo"
      :style="`width: ${size}px`"
    >
      v-resize="{mode: 'throttle', handler}"
    </div>
    <p>当前尺寸: {{ caughtSize3 }}px</p>
  </section>
</article>
</template>

<script>
import { Button, resize } from 'veui'

export default {
  components: {
    'veui-button': Button
  },
  directives: {
    resize
  },
  data () {
    return {
      size: 315,
      caughtSize: 315,
      caughtSize1: 315,
      caughtSize2: 315,
      caughtSize3: 315
    }
  },
  methods: {
    randomSize () {
      this.size = Math.ceil(Math.random() * 480) + 315
    },
    updateSize () {
      this.caughtSize = this.$refs.demo.offsetWidth
    },
    updateSize1 () {
      this.caughtSize1 = this.$refs.demo1.offsetWidth
    },
    updateSize2 () {
      this.caughtSize2 = this.$refs.demo2.offsetWidth
    },
    updateSize3 () {
      this.caughtSize3 = this.$refs.demo3.offsetWidth
    }
  }
}
</script>

<style lang="less" scoped>
.demo {
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  padding-left: 10px;
  background-color: #eee;
  transition: width 2s;
}
</style>

API

绑定值

类型：function | Object。

使用 function 类型则绑定值表示 resize 时触发的回调函数。例如：

<div v-resize="handler"></div>

使用 Object 类型时绑定值可完整配置所有参数。例如：

<div v-resize="{
  wait: 100,
  mode: 'debounce',
  handler: cb,
  leading: true
}"></div>
参数类型默认值描述
waitnumber150传递给 mode 函数的毫秒数。
modestring-

执行模式，默认为最细粒度。

值描述
debounce防抖模式。
throttle节流模式。
handlerfunction-resize 时触发的回调函数。
leadingbooleanfalse防抖、节流模式是否在 resize 最初就将执行一次。

修饰符

对应 Object 类型绑定值中的 mode / leading / wait。leading 可以与 debounce / throttle 其中之一同时使用。例如：

<div v-resize.throttle.leading.500="handler"></div>
值描述
debounce使用防抖模式，不能与 throttle 一同使用。
throttle使用节流模式，不能与 debounce 一同使用。
leading使用后，防抖、节流模式在第一次触发 resize 时就将执行一次。
wait传递给 mode 函数的毫秒数，注意这里 wait 是一个变量。
在 GitHub 上编辑此页编辑