全屏 API

Document.exitFullscreen() (opens new window)

该方法用于请求从全屏模式切换到窗口模式

Element.requestFullscreen() (opens new window)

该方法用于请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式

比如我们可以通过 document.getElementById('app').requestFullscreen() 在获取 id=app 的 DOM 之后，把该区域置为全屏但是该方法存在一定的小问题，比如：appmain 区域背景颜色为黑色

上下文菜单事件

Element: contextmenu event (opens new window)

contextmenu 事件会在用户尝试打开上下文菜单时被触发。

该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发，如果使用菜单键，该上下文菜单会被展示 到所聚焦元素的左下角，但是如果该元素是一棵 DOM 树的话，上下文菜单便会展示在当前这一行的左下角。

HTML 拖放 API

HTML 拖放 API (opens new window)

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。

例如，用户可使用鼠标选择可拖拽元素，将元素拖拽到可放置元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

笔记

drop：把Excel拖拽到文件区域，松开鼠标的时候触发

dragover：把Excel拖拽到文件区域的时候就会触发（每 100 毫秒触发一次）。

dragenter：把Excel拖拽到文件区域的时候就会触发

drop：当元素或选中的文本在可释放目标上被释放时触发

dragover：当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。

dragenter：当拖拽元素或选中的文本到一个可释放目标时触发

<div
     class="drop"
     @drop.stop.prevent="handleDrop"
     @dragover.stop.prevent="handleDragover"
     @dragenter.stop.prevent="handleDragover"
     >
    <i class="el-icon-upload" />
    <span>{{ $t('msg.uploadExcel.drop') }}</span>
</div>

FileReader

FileReader (opens new window)

允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File (opens new window) 或 Blob (opens new window) 对象指定要读取的文件或数据。

​

DataTransfer

DataTransfer.dropEffect (opens new window)

控制在拖放操作中给用户的反馈（通常是视觉上的）。它会影响在拖拽过程中光标的手势。

例如，当用户 hover 在一个放置目标元素上，浏览器的光标可能会预示了将会发生什么操作。