imps-element-fullscreen
v1.0.3
Published
A vue js method that can easily move to element fullscreen view.
Downloads
7
Maintainers
Readme
Imps Element Fullscreen
A vue js method that can easily move to element fullscreen view. Available for vue2 and vue3 both
Documentation
see documentation here
installation
Vue2
npm i imps-element-fullscreen --tag=v2
Vue3
npm i imps-element-fullscreen --tag=v3
Usage
#Vue 2
// import and use in your main.js file
import Vue from 'vue'
import App from './App.vue'
import ImpsElementFullscreen from 'imps-element-fullscreen'
Vue.use(ImpsElementFullscreen);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
// use on vue components
<template>
<div id="app">
<div style="padding: 50px; border: 1px solid red; background-color: yellow;">
<button type="button" @click="fullscreen">{{ isFullscreen ? 'Windowed' : 'Fullscreen'}}</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
isFullscreen: false
}
},
methods:{
fullscreen(e){
const target = e.target.parentNode
this.$elementFullscreen(target)
.then((response) => {
this.isFullscreen = response;
})
.catch((error) => {
console.error("Fullscreen activation failed:", error);
});
}
}
}
</script>
#Vue 3
// import and use in your main.js file
import { createApp } from 'vue';
import App from './App.vue';
import ImpsElementFullscreen from 'imps-element-fullscreen';
const app = createApp(App);
// Install the plugin globally
app.use(ImpsElementFullscreen);
app.mount('#app');
// use on vue components (composition api)
<template>
<div>
<div style="padding: 50px; border: 1px solid red; background-color: yellow;">
<button type="button" @click="fullscreen">{{ isFullscreen ? 'Windowed' : 'Fullscreen'}}</button>
</div>
</div>
</template>
<script>
import { ref, getCurrentInstance } from 'vue'
export default {
setup() {
const app = getCurrentInstance();
const elementFullscreen = app.appContext.config.globalProperties.$elementFullscreen;
const isFullscreen = ref(false);
const fullscreen = (e) => {
const target = e.target.parentNode
elementFullscreen(target)
.then((response) => {
isFullscreen.value = response;
})
.catch((error) => {
console.error("Fullscreen activation failed:", error);
});
};
return {
isFullscreen,
fullscreen
};
},
};
</script>