vue-visibility
vue-visibility
一个用于监听页面可见性(显示/隐藏)的vue组件
安装
使用npm命令安装
npm install vue-visibility
使用
引入vue-visibility,并使用Vue.use()注册插件,之后即可使用
<template>
<div id="app">
<vue-visibility @change="handleVisibilityChange">
Content
</vue-visibility>
</div>
</template>
<script>
import VueVisibility from 'vue-visibility'
import Vue from 'vue'
Vue.use(VueVisibility)
export default {
methods: {
handleVisibilityChange (hidden) {
const result = hidden ? '页面隐藏' : '页面显示';
console.log(result);
},
},
}
</script>
Dependencies
autoprefixer: ^6.7.7babel-core: ^6.22.1babel-eslint: ^7.1.1babel-helper-vue-jsx-merge-props: ^2.0.2babel-loader: ^6.2.10babel-plugin-component: ^0.9.1babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-export-extensions: ^6.8.0babel-plugin-transform-vue-jsx: ^3.4.2babel-polyfill: ^6.22.0babel-preset-es2015: ^6.24.1babel-preset-stage-2: ^6.22.0connect-history-api-fallback: ^1.3.0cross-env: ^3.1.3css-loader: ^0.27.1echarts: ^3.6.2electron-devtools-installer: ^2.0.1eslint: ^4.18.2eslint-config-standard: ^7.0.1eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.6.1eslint-plugin-html: ^3.2.2eslint-plugin-promise: ^3.5.0eslint-plugin-standard: ^2.1.1eventsource-polyfill: ^0.9.6express: ^4.15.2extract-text-webpack-plugin: ^2.0.0-beta.4file-loader: ^0.10.1html-webpack-plugin: ^2.25.0imports-loader: ^0.7.0mdi: ^2.0.46opn: ^4.0.2ora: ^1.1.0postcss-loader: ^1.3.3progress-bar-webpack-plugin: ^1.9.1serve-favicon: ^2.4.1shelljs: ^0.8.3style-loader: ^0.13.1url-loader: ^0.5.7vue: ^2.4.1vue-html-loader: ^1.2.3vue-loader: ^11.1.4vue-template-compiler: ^2.2.2webpack: ^2.2.1webpack-dev-middleware: ^1.9.0webpack-hot-middleware: ^2.14.0webpack-merge: ^4.0.0