可见

v-b-visible 是一个轻量级指令，它允许你在元素在视口中可见和/或移出视口（或不再可见）时做出反应。

自 v2.1.0 起在 BootstrapVue 中可用

概述

v-b-visible 会使用一个布尔值来调用你的回调方法，指示元素是否可见（与视口相交）或不可见。
该指令可以放置在几乎任何元素或组件上。
还可以检测到可见性的变化（例如 display: none），只要该元素在视口内（或部分在视口内）或在可选偏移量内即可。注意：由于 v-if="false" 而导致过渡到不可见状态无法被检测到。
在内部，BootstrapVue 在多个组件中使用此指令，例如 <b-img-lazy>。
v-b-visible 指令需要浏览器支持 IntersectionObserver。对于不支持 IntersectionObserver 的较旧浏览器，你需要使用 polyfill。
如果未检测到 IntersectionObserver 支持，则 v-b-visible 将假定该元素始终可见，并使用设置为 true 的参数调用回调一次。

指令语法和用法

<div v-b-visible.[mod1].[mod2]="callback">content</div>

其中 callback 是必需的

每当可见性发生变化时都会调用的函数引用。回调传递一个布尔参数。 true 表示元素在视口中相交（部分或全部可见），或者 false 表示元素不可见/与视口不相交。元素的可见性每次发生变化时都会调用回调（当使用 once 修饰符时除外。有关详细信息，请参见下文）

其中 [mod1] 或 [mod2] 可以是（全部可选）

表示远离视口边缘的偏移（边距）的正整数，以像素为单位，用于确定何时将元素视为位于视口中（或即将位于视口中）。该值在视口周围添加边距。默认值为 0。
关键字 once。当存在此修饰符时，仅在元素第一次可见时调用回调（参数 true 表示元素相交/可见）。请注意，回调可能在此之前使用参数 false 调用，表示元素不相交/不可见。

修饰符的顺序并不重要。

用法语法示例

在所有用例中，回调函数都是必需的。

基本（无修饰符）

<template>
  <div v-b-visible="visibleHandler"> ... </div>
</template>
<script>
export default {
  methods: {
    visibleHandler(isVisible) {
      if (isVisible) {
        // Do something
      } else {
        // Do something else
      }
    }
  }
}
</script>

带视口偏移修饰符

在此示例中，修饰符值表示 350px（如果元素至少超出物理视口 350px，则将被视为“可见”）

<template>
  <div v-b-visible.350="visibleHandler"> ... </div>
</template>
<script>
export default {
  methods: {
    visibleHandler(isVisible) {
      if (isVisible) {
        // Do something
      } else {
        // Do something else
      }
    }
  }
}
</script>

使用 `once` 修饰符

<template>
  <div v-b-visible.once="visibleHandler"> ... </div>
</template>
<script>
export default {
  methods: {
    visibleHandler(isVisible) {
      if (isVisible) {
        // This will only ever happen once, when the
        // element has become visible for the first time
      } else {
        // This may happen zero or more times before
        // the element becomes visible, but will never
        // happen after the element has become visible
      }
    }
  }
}
</script>

同时使用 `once` 和 offset 修饰符

<template>
  <div v-b-visible.once.350="visibleHandler"> ... </div>
</template>
<script>
export default {
  methods: {
    visibleHandler(isVisible) {
      if (isVisible) {
        // This will only ever happen once, when the
        // element is outside of the physical viewport
        // by at least 350px for the first time
      } else {
        // This may happen zero or more times before
        // the element becomes visible, but will never
        // happen after the element has become visible
      }
    }
  }
}
</script>

实时示例

以下两个实时示例展示了两个常见的用例。

滚动内容的可见性

滚动容器以查看 <b-badge> 滚动到视图中的反应。请注意，如果元素滚动出视口，可见性状态也会发生变化。

<template>
  <div>
    <div
      :class="[isVisible ? 'bg-info' : 'bg-light', 'border', 'p-2', 'text-center']"
      style="height: 85px; overflow-y: scroll;"
    >
      <p>{{ text }}</p>
      <b-badge v-b-visible="handleVisibility">Element with v-b-visible directive</b-badge>
      <p>{{ text }}</p>
    </div>
    <p class="mt-2">
      Visible: {{ isVisible }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isVisible: false,
        text: `
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur commodo
          non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum
          commodo tempor sunt in proident. Non elixir food exorcism nacho tequila tasty.
        `
      }
    },
    methods: {
      handleVisibility(isVisible) {
        this.isVisible = isVisible
      }
    }
  }
</script>

<!-- v-b-visible-scroll.vue -->

当此用例与 once 修饰符结合使用时，可以查看用户是否已滚动到页面或可滚动 div 的底部（即已“阅读”整个服务条款）。

CSS 显示可见性检测

单击按钮以更改 <div> 可见性状态。请注意，如果元素滚动出视口，可见性状态也会发生变化。

<template>
  <div>
    <b-button @click="show = !show" class="mb-2">Toggle display</b-button>
    <p>Visible: {{ isVisible }}</p>
    <div class="border p-3" style="height: 6em;">
      <!-- We use Vue's `v-show` directive to control the CSS `display` of the div -->
      <div v-show="show" class="bg-info p-3">
        <b-badge v-b-visible="handleVisibility">Element with v-b-visible directive</b-badge>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        isVisible: false
      }
    },
    methods: {
      handleVisibility(isVisible) {
        this.isVisible = isVisible
      }
    }
  }
</script>

<!-- v-b-visible-display.vue -->

另请参阅

有关 IntersectionObserver 的更多详细信息，请参阅 MDN 文档

指令参考

导入单个指令

您可以通过以下命名导出将单个指令导入到您的项目中

指令	命名导出	导入路径
`v-b-visible`	`VBVisible`	`bootstrap-vue`

示例

import { VBVisible } from 'bootstrap-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-visible', VBVisible)

作为 Vue.js 插件导入

此插件包含上述所有列出的单个指令。

命名导出	导入路径
`VBVisiblePlugin`	`bootstrap-vue`

示例

import { VBVisiblePlugin } from 'bootstrap-vue'
Vue.use(VBVisiblePlugin)

概述