A fullscreen components for vue2, supports single page applications

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)
You might also like...
A playground for wI2L/jsondiff. Supports all the options of the package.
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

LocaleSwitcher component for Vue. Supports SSR apps.

LocaleSwitcher component for Vue. Supports SSR apps.

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-

Applications for any device with HTML, CSS and JavaScript - free and open source!
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

Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.
Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

A framework for building VR applications with Vue
A framework for building VR applications with Vue

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

Wowerlay is a popover library for Vue 3 applications.
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

Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Handling Google sign-in and sign-out for Vue3 applications.
Handling Google sign-in and sign-out for Vue3 applications.

vue3-google-oauth2 Handling Google sign-in and sign-out for Vue3 applications. Please refer to here for Vue2 applications. Front-end Demo Installation

Owner
Hyhello
前端一枚~
Hyhello
A wrapper for Google Analytics to be used in web clients, oriented to single page applications

This is a wrapper for Google Analytics to be used in web clients, oriented to single page applications (something that google doesn't do oob), like automatically reporting requests performance, navigation links, redux plugin etc

Imperva 11 Mar 22, 2022
A simple Vue.js component for fullscreen

vue-fullscreen A simple Vue.js component for fullscreen Live demo Quick Example Usage with v-for Usage with modal 中文文档 Browser support Full Screen API

mirari 398 Sep 24, 2022
A simple Vue.js component for fullscreen, based on screenfull.js

vue-fullscreen A simple Vue.js component for fullscreen, based on screenfull.js vue-fullscreen for vue2 Live demo Quick Example Component Api Directiv

mirari 2 Sep 26, 2022
Ft transcendence - A single-page website to play pong, with a chat and an account system implemented

Welcome to my ft_transcendence repository ?? ⭐️ The aim of this project is to bu

Alexandre de Garrigues 0 Jan 11, 2022
Frontend Mentor - Huddle Landing Page with Single Introductory Section Solution

Solution to the Huddle Landing Page Hero Section challenge by Frontend Mentor. Built with Vue+ TypeScript + UnoCSS + Vite.

null 0 May 3, 2022
A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

刘云鹤 14 Aug 31, 2022
Lexical components and composables for Vue applications.

lexical-vue Note: Lexical is currently in early development and APIs and packages are likely to change quite often. Lexical components and composables

Robert Soriano 97 Oct 6, 2022
HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

Evandro C. Severgnini 0 Aug 10, 2021
A require hook for loading single-file vue components in node

A require hook for loading single-file vue components in node. Useful for testing without having to spin up web browsers!

Ken Powers 61 Oct 22, 2021
Adds support to Brunch for pre-compiling single file Vue components

Vue Brunch Adds support to Brunch for pre-compiling single file Vue components. Installation For 2.x support, use the master branch... npm install vue

Nathaniel Blackburn 78 May 29, 2021