可見性

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 則表示元件不可見/未與視窗相交。每當元件能見度變化時

其中 [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>

使用視窗抵銷修飾子

在此範例中，修飾子值代表 350 像素（如果元素至少超出實際視窗 350 像素，它將被視為「可見」）

<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` 和抵銷修飾子

<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)

概觀