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 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 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
PHP自定义错误处理的方法分析
2018/12/19 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
在python的类中动态添加属性与生成对象
2016/09/17 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Django接收自定义http header过程详解
2019/08/23 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
计算机本科生自荐信
2013/10/15 职场文书
毕业生简单求职信
2013/11/19 职场文书
期中考试反思800字
2014/05/01 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
数学系毕业生求职信
2014/05/29 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
医院感染管理制度
2015/08/05 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android