一、項目中使用的是sreenfull插件,執行命令安裝
第一步:安裝sreenfull插件:
在命令行中執行:(注:由於這是生產依賴,因此執行–save)固然你也能夠在Vue的GUI的依賴選項中直接搜索screenfull來進行安裝。
html
npm install screenfull save
二、html代碼npm
<el-tooltip content="全屏縮放" effect="dark" placement="bottom" fullscreen> <screenfull id="screenfull" class="el-icon-full-screen" @click="isScreenFull" /> </el-tooltip>
三、script代碼瀏覽器
<script> //引入全屏插件 import screenfull from "screenfull"; data() { return { isFullscreen: false }; }, methods: { //全屏方法 isScreenFull() { // 須要注意的是 若是判斷!screenfull.enabled 顯示的是不支持全屏的話 是由於谷歌的版本問題 判斷改成 !screenfull.isEnabled 就能夠了 if (!screenfull.isEnabled) { // 若是不支持進入全屏,發出不支持提示 this.$message({ message: "您的瀏覽器版本太低不支持全屏顯示!", type: "warning" }); return false; } screenfull.toggle(); } } };
完成以上操做,全屏功能便可實現。this