Vue Observe Visibility
made with Vuejs

Vue Observe Visibility

这是一个元素可见性观察者指令组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vue Observe Visibility是一个元素可见性观察者指令组件,用来监测页面元素隐藏和显示的变化。

安装

Npm

npm i vue-observe-visibility

Yarn

yarn add vue-observe-visibility

浏览器

<script src="vue.js"></script>
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>

Vue.use(VueObserveVisibility)

//或者

Vue.directive('observe-visibility', VueObserveVisibility.ObserveVisibility)

使用

引入

import Vue from 'vue'
import VueObserveVisibility from 'vue-observe-visibility'

Vue.use(VueObserveVisibility)

或者

import Vue from 'vue'
import { ObserveVisibility } from 'vue-observe-visibility'

Vue.directive('observe-visibility', ObserveVisibility)

作为指令使用

<div v-observe-visibility="visibilityChanged">


//函数

visibilityChanged (isVisible, entry) {
  this.isVisible = isVisible
  console.log(entry)
}

示例

<div id="app">
  <button @click="show = !show">Toggle</button>
  <label>
    <input type="checkbox" v-model="isVisible" disabled/> Is visible?
  </label>
  <div ref="test" v-show="show" v-observe-visibility="visibilityChanged">Hello world!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    show: true,
    isVisible: true,
  },
  methods: {
    visibilityChanged (isVisible, entry) {
      this.isVisible = isVisible
      console.log(entry)
    },
  },
})
</script>
作者

Guillaume Chau

@Akryum

相关项目

这是一个基于Vue.js的Github样式的日历热图。
这是一个基于Splide的Vue滑块组件。
这是一个基于Vue的滚动条组件。
这是一个Bootstrap风格简单分页组件。
这是一个Vue.js 2打字机效果组件 。
这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。