Vue 全屏显示效果实现
1、项目中使用的是sreenfull插件,执行命令安装第一步:安装sreenfull插件:在命令行中执行:(注:因为这是生产依赖,所以执行–save)当然你也可以在Vue的GUI的依赖选项中直接搜索screenfull来进行安装。npm install screenfullsave2、html代码<el-tooltip content="全屏缩放" effect="dark" placeme
·
1、项目中使用的是sreenfull插件,执行命令安装
第一步:安装sreenfull插件:
在命令行中执行:(注:因为这是生产依赖,所以执行–save)当然你也可以在Vue的GUI的依赖选项中直接搜索screenfull来进行安装。
npm install screenfull save
2、html代码
<el-tooltip content="全屏缩放" effect="dark" placement="bottom" fullscreen>
<screenfull id="screenfull" class="el-icon-full-screen" @click="isScreenFull" />
</el-tooltip>
3、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();
}
}
};
完成以上操作,全屏功能即可实现。
更多推荐
已为社区贡献3条内容
所有评论(0)