如何通过screenfull插件在Vue中实现页面全屏显示？

本文共计391个文字，预计阅读时间需要2分钟。

原文示例：本文字例为大家分享了使用vue使用screenfull插件实现全屏功能的整体代码，供大家参考。具体内容如下：

+ 1. 安装screenfull.js插件（在npm官网上有）+ npm install screenfull --save+ 2. 在vue项目中src/comp

改写后：本例展示如何利用vue和screenfull插件实现全屏功能。具体步骤包括：

1. 安装screenfull插件（npm官网可查）

2.使用npm命令安装：npm install screenfull --save

3.在vue项目src/comp目录下引入并使用。

本文实例为大家分享了vue使用screenfull插件实现全屏功能的具体代码，供大家参考，具体内容如下

1、安装screenfull.js插件（在npm官网上有）

npm install screenfull --save

2、在vue项目中 src/components/ScreenFull/index.vue（写成公共组件）

<template> <el-tooltip effect="dark" content="全屏" placement="bottom"> <img @click="screen" class="pointer" :src="require('@/assets/images/screenful.png')" :width="width" :height="height"> </el-tooltip> </template> <script> import screenfull from 'screenfull' export default { name: 'screenful', components: { }, props: { width: { type: Number, default: 20 }, height: { type: Number, default: 20 } }, data() { return { } }, computed: { }, watch: { }, methods: { screen() { if (!screenfull.isEnabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } }, created() { }, mounted() { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="less" scoped> </style>

3、使用screenful组件

<template> <screenfull class="ml64" :width="20" :height="20"></screenfull> </template> <script> import screenfull from '@/components/ScreenFull' export default { name: 'navbar', components: { screenfull }, data() { return { } }, computed: { }, watch: { }, methods: { }, created() { }, mounted() { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="less" scoped> </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。