vue项目全屏展示

最新推荐文章于 2024-06-11 16:12:12 发布

程序托尼

最新推荐文章于 2024-06-11 16:12:12 发布

阅读量663

点赞数 1

分类专栏： vue全屏展示 vue.js 前端文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_65777697/article/details/129300955

版权

1：全屏展示页面所有内容

<span  style="color:#918F8F" @click="clickFun">
    <img :src="isFullFlag?closeFullImg:openFullImg" style="width:12px;vertical-align:middle"/>
    {
   {isFullFlag?'退出全屏':'全屏'}}
</span>
 
<script>
export default {
    data(){
        return{
            isFullFlag:false
        }
    }
    mounted() {
        // 监听页面全屏
        window.addEventListener("fullscreenchange", (e)=> {
          if(screenfull.isFullscreen){
            this.isFullFlag = true
          }else{
            this.isFullFlag = false
          }
        })
    },
    methods:{
        clickFun(){
            this.isFullFlag =!this.isFullFlag
            if (!screenfull.enabled) {
                this.$message({
                     message: 'Your browser does not work',