@7anshuai/vue-auto-sizer 中文文档教程

Question

vue-auto-sizer

自动调整单个子项宽高的vue组件。

注意：vue-auto-sizer 是 react-virtualized-auto-sizer< 的 vue 克隆/a>

Prop Types

Property	Type	Required?	Description
defaultHeight	Number		Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting.
defaultWidth	Number		Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting.
disableHeight	Boolean		Fixed height; if specified, the child's height property will not be managed
disableWidth	Boolean		Fixed width; if specified, the child's width property will not be managed
nonce	String		Nonce of the inlined stylesheets for Content Security Policy
onResize	Function		Callback to be invoked on-resize; it is passed the following named parameters: ({ height: number, width: number }).

Examples

一些 vue 组件需要显式尺寸，但有时您只希望组件增长以填充所有可用空间。 AutoSizer 组件在这种情况下很有用。

关于将 AutoSizer 与 flexbox 容器一起使用的注意事项。 Flex 容器不会阻止它们的子容器增长，AutoSizer 会贪婪地增长以填充尽可能多的空间。 将两者结合起来可能会导致循环。 解决此问题的简单方法是将 AutoSizer 嵌套在 block 元素（如

）中，而不是将其作为flex 容器的直接子容器。 在此处阅读有关AutoSizer 常见问题的更多信息。

<template>
  <div id="app">
    <h1>
      <img alt="Vue logo" src="./assets/logo.png">
    </h1>

    <p>
      vue-auto-sizer is a vue clone of <a href="https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md">React virtualized auto sizer</a>
    </p>

    <div class="auto-sizer-wrapper">
      <auto-sizer v-slot="{ sizer: { height, width} }">
        <div :style="{ height: height + 'px', width: width + 'px' }">
          Auto sized content...
        </div>
      </auto-sizer>
    </div>
  </div>
</template>

<script>
import AutoSizer from 'vue-auto-sizer'

export default {
  name: 'App',
  components: {
    AutoSizer
  },
  methods: {
    onResize ({ height, width }) {
      console.log(height, width)
    }
  }
}
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.auto-sizer-wrapper {
  flex: 1 1 auto;
}
</style>

Development

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build:lib

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint

Customize configuration

请参阅配置参考。