A fullscreen components for vue2, supports single page applications

Hyhello

Last update: Mar 28, 2022

Related tags

Miscellaneous vue-fullscreen

Overview

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

content

<template>
	<div>
		<div class="bindEl">contentdiv>
		<vue-fullscreen bind=".bindEl" @change="change" :native-options="options">
			<button>fullscreen togglebutton>
		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）

Browserify transform for single-file Vue components

vueify-fork Browserify transform for Vue.js components, with scoped CSS and component hot-reloading. NOTE: master branch now hosts version ^9.0, which

2 Dec 13, 2019

A playground for wI2L/jsondiff. Supports all the options of the package.

jsondiff Playground A playground for wI2L/jsondiff. Supports all the options of the package. Getting started To run the application locally, first ins

2 Sep 6, 2022

LocaleSwitcher component for Vue. Supports SSR apps.

2 Jun 16, 2022

Survey builder for vue.js applications

vue-survey-builder This is a survey builder component for vue.js applications. How to install You can install the component using npm i -S vue-survey-

103 Nov 24, 2022

Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

646 Dec 28, 2022

Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

13 Dec 14, 2022

A framework for building VR applications with Vue

A Wrapper of Panolens for building VR applications with Vue based on threejs

454 Dec 30, 2022

Wowerlay is a popover library for Vue 3 applications.

Wowerlay is a popover library for Vue 3 applications. It isn't an alternative for Popper. Demos/Examples You can see all examples Here. Intallation Fo