zoukankan      html  css  js  c++  java
  • vue-cli点击实现全屏功能(两种方式)

    项目中有点击按钮实现全屏功能
    方式一:js实现全屏

    代码如下:
    <template>
    <div>
    <a-button type="primary" @click="screen">全屏</a-button>
    </div>
    </template>

    <script>
    export default {
    name: "index",
    data(){
    return{
    fullscreen: false
    }
    },
    methods:{
    screen(){
    let element = document.documentElement;
    if (this.fullscreen) {
    if (document.exitFullscreen) {
    document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
    }
    } else {
    if (element.requestFullscreen) {
    element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
    // IE11
    element.msRequestFullscreen();
    }
    }
    this.fullscreen = !this.fullscreen;
    }
    }
    }
    </script>

    <style scoped>

    </style>


    方式二:使用的是sreenfull插件,执行命令安装

    npm install --save screenfull

    在使用的页面正确引入:

    import screenfull from ‘screenfull’

    代码如下:
    <template>
    <div>
    <a-button type="primary" @click="screen">全屏</a-button>
    </div>
    </template>

    <script>
    import screenfull from 'screenfull'
    export default {
    name: "home",
    data() {
    return {
    //默认不全屏
    isFullscreen: false
    }
    },

    methods: {
    screen(){
    // 如果不允许进入全屏,发出不允许提示
    if (!screenfull.enabled) {
    this.$message('您的浏览器不能全屏');
    return false
    }
    screenfull.toggle();
    this.$message.success('全屏啦')
    }
    }
    }
    </script>

    <style scoped>

    </style>

  • 相关阅读:
    Vue学习之路5-v-model指令
    Vue学习之路4-v-bind指令
    Laravel 中的 Many-To-Many
    laravel获取checkbox值的小技巧
    查看 Laravel 的 SQL 语句的方法
    那些好用的插件(持续更新)
    写代码原则
    Laravel 5.5 Blade::if 简介
    Laravel 项目使用 Carbon 人性化显示文章发表时间
    php7简短而安全的数组遍历方法
  • 原文地址:https://www.cnblogs.com/sea520/p/11833589.html
Copyright © 2011-2022 走看看