美文网首页
screenfull.js实现全屏功能基于vue项目中运用

screenfull.js实现全屏功能基于vue项目中运用

作者: 关小圣 | 来源:发表于2019-10-23 11:04 被阅读0次

    在很多时候项目都需要全屏:就会使用到全屏插件---screenfull.js

    1. 我的项目基于vue的,直接开始文档(https://www.npmjs.com/package/screenfull),先npm,现在最版是5.0.0
    $ npm install --save screenfull
    
    1. 直接上代码:
      在需要的页面引入
    import screenfull from "screenfull";
    
    <template>
      <div class="hello">
        <el-button type="primary" class="button" @click="setScreenfull">全屏开启</el-button>
      </div>
    </template>
    
    <script>
    import screenfull from "screenfull";
    export default {
      name: "HelloWorld",
      data() {
        return {
          // isFullscreen: false
        };
      },
      methods: {
        setScreenfull() {
          if (!screenfull.isEnabled) {
            // 如果不允许进入全屏,发出不允许提示
            this.$message({
              message: "暂不不支持全屏",
              type: "warning"
            });
            return false;
          }
          screenfull.toggle();
          this.$message({
            message: "全屏开启",
            type: "success"
          });
        }
      }
    };
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1,
    h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    
    
    
    1. 注意事项,判断是否全屏可用 screenfull.isEnabled

    相关文章

      网友评论

          本文标题:screenfull.js实现全屏功能基于vue项目中运用

          本文链接:https://www.haomeiwen.com/subject/xxihvctx.html