vue使用screenfull插件实现全屏功能


Posted in Javascript onSeptember 17, 2020

本文实例为大家分享了vue使用screenfull插件实现全屏功能的具体代码,供大家参考,具体内容如下

1、安装screenfull.js插件(在npm官网上有)

npm install screenfull --save

2、在vue项目中 src/components/ScreenFull/index.vue(写成公共组件)

<template>
 <el-tooltip effect="dark" content="全屏" placement="bottom">
  <img @click="screen" class="pointer" :src="require('@/assets/images/screenful.png')" :width="width" :height="height">
 </el-tooltip>
</template>

<script>
import screenfull from 'screenfull'
export default {
 name: 'screenful',
 components: {
 },
 props: {
  width: {
   type: Number,
   default: 20
  },
  height: {
   type: Number,
   default: 20
  }
 },
 data() {
  return {
  }
 },
 computed: {
 },
 watch: {
 },
 methods: {
  screen() {
   if (!screenfull.isEnabled) {
    this.$message({
     message: 'you browser can not work',
     type: 'warning'
    })
    return false
   }
   screenfull.toggle()
  }
 },
 created() {
 },
 mounted() {
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>

3、使用screenful组件

<template>
  <screenfull class="ml64" :width="20" :height="20"></screenfull>
</template>
<script>
import screenfull from '@/components/ScreenFull'
export default {
 name: 'navbar',
 components: {
  screenfull
 },
 data() {
  return {
  }
 },
 computed: {
 },
 watch: {
 },
 methods: {
 },
 created() {
 },
 mounted() {
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
详解AngularJS 模块化
Jun 14 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
用JS实现飞机大战小游戏
Jun 09 Javascript
Vue使用screenfull实现全屏效果
Sep 17 #Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 #Javascript
JavaScript编码小技巧分享
Sep 17 #Javascript
如何利用node转发请求详解
Sep 17 #Javascript
前端性能优化建议
Sep 17 #Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 #Javascript
JavaScript中如何调用Java方法
Sep 16 #Javascript
You might like
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
php获取apk包信息的方法
2014/08/15 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
vue中如何添加百度统计代码
2020/12/19 Vue.js
python回调函数中使用多线程的方法
2017/12/25 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
求职意向书范文
2014/04/01 职场文书
作文批改评语大全
2014/04/23 职场文书
美术学专业求职信
2014/07/23 职场文书
大学生见习报告范文
2014/11/03 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2015年教务工作总结
2015/05/23 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书