vue项目实现全屏不难，只要使用
screenfull
插件即可实现，但实现全屏功能后，我们还需要更新全屏和退出全屏的图标，我在图标切换这可是苦恼了很久…
问题：
因为，我们退出全屏的方式很多，有通过点击退出全屏按钮，有按Esc键，还有鼠标移动到中间顶部显示的那个关闭按钮，这时，我们不仅要监听点击按钮事件，Esc事件，还要监听是否按了那个关闭按钮，前两者还好办，最后一个难倒我了。
解决方法：监听屏幕变化，一旦变化变判断是否全屏，从而实现图标正常切换。
一：下载引入
screenfull
插件
npm install screenfull --save
//在调用全屏功能的组件中引入
import screenfull from 'screenfull'
二：定义全屏切换函数
toggleFullscreen () {
if(!screenfull.isEnabled){ //判断一下浏览器是否支持全屏显示
this.$message({
message:'浏览器不能全屏',
type:'warning'
return false
screenfull.toggle() //进行全屏切换
三：调用切换全屏函数
<template>
<div class="my_icon">
<img src="./imgs/fullscreen.png" alt="" @click="toggleFullscreen" v-if="!isScreenFull">
<img src="./imgs/outscreen.png" alt="" @click="toggleFullscreen" v-else>
</template>
四：监听窗口大小变化，判断是否全屏
// 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false
window.onresize = () => {
this.isScreenFull = screenfull.isFullscreen
完整代码：
<template>
<div class="my_icon">
<img src="./imgs/fullscreen.png" alt="" @click="toggleFullscreen" v-if="!isScreenFull">
<img src="./imgs/outscreen.png" alt="" @click="toggleFullscreen" v-else>
</template>
<script>
import screenfull from 'screenfull' //全屏功能
export default {
data () {
return {
isScreenFull:false //是否全屏
mounted () {
// 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false
window.onresize = () => {
this.isScreenFull = screenfull.isFullscreen
methods: {
toggleFullscreen () {
if(!screenfull.isEnabled){ //判断一下浏览器是否支持全屏显示
this.$message({
message:'浏览器不能全屏',
type:'warning'
return false
screenfull.toggle()
</script>
vue项目实现全屏不难，只要使用screenfull 插件即可实现，但实现全屏功能后，我们还需要更新全屏和退出全屏的图标，我在图标切换这可是苦恼了很久…问题：因为，我们退出全屏的方式很多，有通过点击退出全屏按钮，有按Esc键，还有鼠标移动到中间顶部显示的那个关闭按钮，这时，我们不仅要监听点击按钮事件，Esc事件，还要监听是否按了那个关闭按钮，前两者还好办，最后一个难倒我了。解决方法：监听屏幕...
created(){
//监听各浏览器fullscreenchange 事件处理
document.addEventListener('fullscreenchange', () => {
this.isfullscreen=!this.isfullscreen
document.addEventListener('mozfullscreenchange', () => {
this.isfullscreen=!this...
跟我们在浏览器中按下键盘上的“F11”按键效果一样。在项目开发中通常就会有全屏功能的需求，在Vue中实现窗口全屏显示还是很简单的，可以利用screenfull组件来实现该功能。
一、安装screenfull组件
在命令行中执行：npm install screenfull --save，在node_modules中可以看到screenfull文件夹，screenfull.js在screen...
文章目录前言vue使用Element-UI部分组件适配移动端组件适配1---Message 消息提示适配样式代码组件适配2---MessageBox 弹框适配样式代码组件适配3---Dialog 对话框适配样式代码结语
使用组件库现成的组件是一件非常爽的事，基本不用自己敲代码，不用自己思考来思考去样式，就能得到一个比较满意的效果。但与此同时也会带来一些不便，那就是部分组件在移动端显得不太友好，还有就是有些样式达不到自己的预期，这时修改起来就比较麻烦了。
最近需要在网页中嵌入一个在线ppt进行展示，虽然我之前通过pdf.js展示pdf来显示ppt内容，但这需要后台将我上传的ppt转换为pdf，工作量大一点，时间也长了点，部署也麻烦了点，所以就换了另一种更轻便的方式。
要是想了解一下上面这种方法的，可点击查看
更轻便的方法：使用微软提供的方法进行文件预览
（1）通过iframe嵌入组件内展示
<iframe id="iframe1" width="800" height="600" frameborder='no' border='0' marg
1：首先还是需要我们利用vue-cli脚手架搭建空vue项目，这个我就不赘述了
2：打开VSCode下载vetur插件
点击左侧圈起来的图标打开拓展插件，在顶部搜索框搜索vetur插件进行下载安装即可。
下载安装完后就会在扩展列表那看到，例如我的是0.29.1版本的
之后需要打开setting.json文件进行配置：
"emmet.syntaxPr
在Vue中监听iframe的全屏事件，可以使用类似于监听浏览器全屏事件的方法。首先需要在父组件中引入子组件，并在子组件中添加一个ref属性。然后在父组件中使用$refs来获取子组件的DOM元素，再对其添加fullscreenchange事件监听器。当全屏状态改变时，就可以在回调函数中对全屏后的样式进行操作了。
具体实现方法如下：
1. 在子组件中添加ref属性，例如： <iframe ref="myIframe"></iframe>
2. 在父组件中使用$refs获取子组件的DOM元素，并添加fullscreenchange事件监听器，例如：
mounted() {
const iframe = this.$refs.myIframe;
iframe.addEventListener('fullscreenchange', this.handleFullScreenChange);
methods: {
handleFullScreenChange() {
// 在这里对全屏后的样式进行操作
需要注意的是，如果iframe的src属性指向的是外部网站，可能会受到浏览器的安全限制而无法监听全屏事件。此时可以考虑使用postMessage方法来进行跨域通信，实现全屏事件的监听。
1哈哈。。。:
element-plus 设置 el-date-picker 弹出框位置
Super500000:
Vue3使用h函数创建子组件（涉及到$emit，props的传递以及多个具名插槽的使用）
qq_41519363:
ECharts中的折线图动态更新数据并控制缩放只显示最新几条数据
热泪盈眶yoghurt:
