Quick start

@hyhello/vue-fullscreen

The @hyhello/vue-fullscreen component for vue2, supports single page applications.

Read this document in: 简体中文.

Examples

codepen.io

Use Setup

install @hyhello/vue-fullscreen

npm install @hyhello/vue-fullscreen --save

Vue mount

// global use
import Vue from 'vue';
import vueFullscreen from '@hyhello/vue-fullscreen';

// use  @params：global configuration
Vue.use(vueFullscreen, [options]);

// or Local use
import { Fullscreen } from '@hyhello/vue-fullscreen';

export default {
    components: { Fullscreen }
};

Use in SPA

<template>
	<div>
		<div class="bindEl">content</div>
		<vue-fullscreen bind=".bindEl" @change="change" :native-options="options">
			<button>fullscreen toggle</button>
		</vue-fullscreen>
	</div>
</template>
<script>
	import { Fullscreen as vueFullscreen } from '@hyhello/vue-fullscreen';

	export default {
		components: { vueFullscreen },
		data: function () {
			return {
				options: {
					navigationUI: 'hide'
				}
			};
		},
		methods: {
			change(val) {
				console.log('status:', val ? 'fullscreen' : 'no fullscreen');
			}
		}
	};
</script>

Api

Attributes

| params | explain | type | Optional value | Default value | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ---------------- | ------------------------ | | bind | Bind elements that need to be enlarged | string / HTMLElement / function | — | document.documentElement | | trigger | Triggered methods | string | click / dblclick | click | | nativeOptions | An object that controls the behavior of the transition to full screen mode，Api | object | — | {} | | keyboard | Enable keyboard control(F11) | boolean | — | true | | beforeChange | Trigger before change | function | — | — |

Events

| eventName | explain | Callback Arguments | | --------- | ------------------------------------------ | ------------------ | | change | Monitor whether the current screen is full | status（boolean） |