vue 全屏组件

梦里梦外; 2022-12-17 07:12 173阅读 0赞

### 第一步，安装依赖 ###

安装[screenfull.js][]依赖包

npm install screenfull -S

### 第二步，添加组件 ###

图标，样式等内容可以根据自己需求改

<template>
    	<span 
    		:class="isFullscreen ? 'ilink-icon-tuichuquanping' : 'ilink-icon-quanping'" 
    		@click="handleClick">
    	</span>
    </template>
    
    <script>
    	import screenfull from 'screenfull'
    
    	export default {
    		name: 'Screenfull',
    		
    		data() {
    			return {
    				isFullscreen: false
    			}
    		},
    		
    		mounted() {
    			this.init()
    		},
    		
    		beforeDestroy() {
    			this.destroy()
    		},
    		
    		methods: {
    			init() {
    				if (screenfull.isEnabled) {
    					screenfull.on('change', this.handleChange)
    				}
    			},
    			
    			destroy() {
    				if (screenfull.isEnabled) {
    					screenfull.off('change', this.handleChange)
    				}
    			},
    
    			handleClick() {
    				if (!screenfull.isEnabled) {
    					this.$message({
    						message: '您的设备不支持全屏',
    						type: 'warning'
    					})
    					return false
    				}
    				screenfull.toggle()
    
                    // 也可以传入需要全屏的元素
                    // screenfull.toggle(document.getElementById('my-screen-box'));
    			},
    			
    			handleChange() {
    				this.isFullscreen = screenfull.isFullscreen;
    			}
    		}
    	}
    </script>

### 第三步，引用 ###

import Screenfull from '@/components/Screenfull/index.vue'
    
    export default {
        ...
    
        components: {
            Screenfull
        }
    }

<screenfull></screenfull>

[screenfull.js]: https://www.npmjs.com/package/screenfull

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3后台管理系统（十三）全屏组件

目录一、两个图标：全屏fullscreen.svg、退出全屏exit-fullscreen.svg 二、组件封装三、使用案例 -------------------

雨点打透心脏的1/2处/ 2024年03月26日 13:41/ 0 赞/ 57 阅读

相关 vue项目-设置全屏背景

在最外侧的盒子上绑定样式即可 <template> <div class="bg"> ... </div> </tem

忘是亡心i/ 2024年03月23日 15:04/ 0 赞/ 87 阅读

相关快应用全屏广告组件

<template> <div class="banner-page" onclick="handleClose"> <div

╰半橙微兮°/ 2023年07月16日 03:36/ 0 赞/ 2 阅读

相关 vue中实现全屏功能

安装全屏插件 npm i screenfull --save 页面引入 import screenfull from 'screenfull'; htm

女爷i/ 2023年01月08日 05:25/ 0 赞/ 169 阅读

相关 vue 全屏组件

第一步，安装依赖安装[screenfull.js][]依赖包 npm install screenfull -S 第二步，添加组件图标，样式等

梦里梦外;/ 2022年12月17日 07:12/ 0 赞/ 174 阅读

相关 vue 全屏和退出全屏

html源码： <div id="allScreen" @click="showScreen" > <div >全屏内容 </div>

Dear 丶/ 2022年12月06日 15:48/ 0 赞/ 267 阅读

相关 vue全屏部分元素

直接上代码： <template> <Card id="cardHeight"> <div style="width:100%

拼搏现实的明天。/ 2022年04月10日 01:51/ 0 赞/ 266 阅读

相关 Vue灵活骨架屏组件封装

骨架屏，就要精准定制才行组件源码及其完整示例，戳这里????? PC观看示例更佳 [示例戳这里][Link 1] [源码戳这里][Link 2

古城微笑少年丶/ 2022年03月12日 11:54/ 0 赞/ 374 阅读

相关 vue开发之全屏事件

在项目中有需求相应浏览器全屏，写了个案例代码先看看效果吧 ![70][] 全屏显示： ![70 1][] html代码： <!-- el-

Myth丶恋晨/ 2021年09月16日 02:14/ 0 赞/ 294 阅读

相关 fullpage全屏/整屏滚动组件简单实例Demo

效果图如下，鼠标滚动可以切换div模块： ![20151217111612933][] ![20151217111609011][] 需要引用的js和css文

╰+攻爆jí腚メ/ 2021年06月10日 20:41/ 0 赞/ 410 阅读