vue项目大小屏适配及全屏

在Vue项目中，可以结合使用CSS媒体查询和JavaScript来实现大小屏适配和全屏功能。

1. 大小屏适配

可以按照我上一个回答中的方式，使用CSS媒体查询来设置不同屏幕尺寸下的样式。此外，还可以使用Vue提供的响应式布局插件，比如`vue-responsive`，来更方便地实现大小屏适配。

安装`vue-responsive`插件：

npm install --save vue-responsive

在Vue项目中使用`vue-responsive`插件：

<template>
  <div>
    <div v-if="$responsive.smAndDown">小屏幕样式</div>
    <div v-else-if="$responsive.mdAndDown">中等屏幕样式</div>
    <div v-else>大屏幕样式</div>
  </div>
</template>

<script>
import responsive from 'vue-responsive';

export default {
  mixins: [responsive],
};
</script>

2. 全屏

可以使用JavaScript来实现全屏功能。在Vue项目中，可以在需要全屏的组件中添加以下代码：

// 进入全屏
function enterFullScreen() {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

// 判断是否为全屏状态
function isFullScreen() {
  return !!(
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

然后在需要使用全屏功能的元素上添加`@click`事件，调用以上函数即可实现全屏。例如：

<template>
  <div @click="toggleFullScreen">点击进入/退出全屏</div>
</template>

<script>
export default {
  methods: {
    toggleFullScreen() {
      if (isFullScreen()) {
        exitFullScreen();
      } else {
        enterFullScreen();
      }
    },
  },
};
</script>