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>

参数类型默认值描述

wait number 150 传递给 mode 函数的毫秒数。

mode

string

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

值	描述
`debounce`	防抖模式。
`throttle`	节流模式。

handler function - resize 时触发的回调函数。

leading boolean false 防抖、节流模式是否在 resize 最初就将执行一次。

Object 类型提供的参数会覆盖通过指令参数、修饰符指定的参数。

修饰符

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

<div v-resize.throttle.leading.500="handler"></div>

值	描述
`debounce`	使用防抖模式，不能与 `throttle` 一同使用。
`throttle`	使用节流模式，不能与 `debounce` 一同使用。
`leading`	使用后，防抖、节流模式在第一次触发 resize 时就将执行一次。
`wait`	传递给 `mode` 函数的毫秒数，注意这里 `wait` 是一个变量。

在修饰符中的唯一正整数将被识别为 wait。

在 GitHub 上编辑此页面编辑