详解vue-flickity的fullScreen功能实现


Posted in Javascript onApril 07, 2020

描述

在项目集成了vue-flickity组件后发现,该组件参考flickity官网的fullscreen配置不起作用

实现方法

  • 需要添加flickity-fullscreen组件
  • 在main.js中导入flickity-fullscreen组件
  • 添加flickity组件的fullscreen属性
  • 定义fullscreen的CSS样式

具体步骤

1.添加flickity-fullscreen组件

需要提前配置好flickity

yarn: yarn add flickity-fullscreen --save

npm: npm install flickity-fullscreen

Bower: bower install flickity-fullscreen

2. 在main.js中导入flickity-fullscreen组件

详解vue-flickity的fullScreen功能实现

3. 添加flickity组件的fullscreen属性

详解vue-flickity的fullScreen功能实现

详解vue-flickity的fullScreen功能实现

4. 定义fullscreen的CSS样式

/* 展开全屏按钮样式 */
.flickity-fullscreen-button-view{
  position: absolute;
  width:auto;
  height:auto;
  z-index: 999999;
  top: 0;
  right: 0;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px #0000000f;
}

/* 退出全屏按钮样式,
 * 设置display:none;是为了不让【展开全屏按钮】和【退出全屏按钮】同时显示在页面上
 */
.flickity-fullscreen-button-exit{
  display: none;
}

/* 点击全屏显示效果 */
.is-fullscreen {
  position: fixed;
  z-index: 1100;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: #0000009e;
 }

/* 当显示了全屏时,隐藏【展开全屏按钮】 */
.is-fullscreen .flickity-fullscreen-button-view{
  display: none;
}

/* 显示全屏时,显示【退出全屏按钮】设置按钮在页面右上方*/
.is-fullscreen .flickity-fullscreen-button-exit{
  display: block;
  position: absolute;
  width:auto;
  height:auto;  
  z-index: 999999;
  top: 0;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px #0000000f;
  right:0;
}

/* 设置被选中的图片大小为全屏*/
.is-fullscreen .is-selected{
  width: 100vw !important;
  height:100vh !important;
}

/* 设置选中的图片自适应屏幕大小,按屏幕大小进行缩放*/
.is-fullscreen .carousel-img{
  width:auto !important;
  height:auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* 取消展开退出按钮点击的边框样式*/
.flickity-button:focus{
  box-shadow: unset;;
}

/* 设置展开退出按钮的宽度*/
.flickity-button-icon{
  width:20px;
}

实际效果

详解vue-flickity的fullScreen功能实现

详解vue-flickity的fullScreen功能实现

Tips不能点击图片显示全屏,暂时只能点击fullscreen按钮全屏状态下没有左右箭头显示,但是可以左右滑动切换图片

参考

https://github.com/metafizzy/flickity-fullscreen#install
https://github.com/drewjbartlett/vue-flickity/issues/43

到此这篇关于详解vue-flickity的fullScreen功能实现的文章就介绍到这了,更多相关vue flickity fullScreen内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
vue开发中遇到的问题总结
Apr 07 #Javascript
手把手教您实现react异步加载高阶组件
Apr 07 #Javascript
javascript绘制简单钟表效果
Apr 07 #Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 #Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python装饰器用法与知识点小结
2020/03/09 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
先进人物事迹材料
2014/12/29 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
php引用传递
2021/04/01 PHP