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图表动画插件Highcharts Examples
Apr 16 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
原生js实现照片墙效果
Oct 13 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
vue keep-alive的简单总结
Jan 25 Vue.js
k8s node节点重新加入master集群的实现
Feb 22 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生成带有雪花背景的验证码
2008/09/28 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
Java中final关键字详解
2015/08/10 PHP
php数组分页实现方法
2016/04/30 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
jQuery常用数据处理方法小结
2015/02/20 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python编程实现的简单神经网络算法示例
2018/01/26 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python3 线性回归验证方法
2019/07/09 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python怎么自定义捕获错误
2020/06/29 Python
香港交友网站:be2香港
2018/07/22 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
车辆工程专业求职信
2014/06/14 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python