vue+elementui 实现移动端禁止截屏、录屏

在Vue和Element UI中实现移动端禁止截屏和录屏可以通过以下步骤来实现：

1. 阻止截屏：可以通过监听`window`对象的`keyup`、`keydown`和`keypress`事件，当用户按下截屏快捷键时，阻止默认行为。

mounted() {
  window.addEventListener('keyup', this.handleScreenCapture);
  window.addEventListener('keydown', this.handleScreenCapture);
  window.addEventListener('keypress', this.handleScreenCapture);
},
methods: {
  handleScreenCapture(event) {
    if (event.keyCode === 44) { // PrtSc键的keyCode为44
      event.preventDefault();
    }
  }
},
beforeDestroy() {
  window.removeEventListener('keyup', this.handleScreenCapture);
  window.removeEventListener('keydown', this.handleScreenCapture);
  window.removeEventListener('keypress', this.handleScreenCapture);
}

2. 阻止录屏：目前Web端无法直接阻止移动设备上的录屏行为，但可以通过添加一层透明的遮罩层来阻挡录屏软件的截屏功能。在Vue中，可以使用Element UI的`Dialog`组件来实现遮罩层。

<template>
  <div>
    <el-dialog :visible="dialogVisible" :center="true" :modal="false" :show-close="false" :close-on-click-modal="false">
      <div class="dialog-content">
        <p>禁止录屏</p>
      </div>
    </el-dialog>
    <!-- 页面其他内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true
    };
  }
};
</script>

<style>
.dialog-content {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.01);
}
</style>

以上代码中，通过设置`dialogVisible`为`true`，使得`Dialog`组件显示为透明的全屏遮罩层。你可以根据需要自定义遮罩层的样式和内容。

请注意，这种方式只能防止一些常见录屏软件的截屏功能，无法完全阻止所有录屏行为。因为在移动设备上，录屏软件通常会使用系统级别的截屏权限，无法通过前端代码进行完全控制。