详解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 ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
最简单的PHP程序--记数器
2006/10/09 PHP
PHP无限分类(树形类)
2013/09/28 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
python数据处理实战(必看篇)
2017/06/11 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
战略合作意向书范本
2014/04/01 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
python图像处理 PIL Image操作实例
2022/04/09 Python