@hyhello/vue-fullscreen v1.0.0

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

Events