详解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 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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
Yii学习总结之安装配置
2015/02/22 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
详解Django中的过滤器
2015/07/16 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python将list转为matrix的方法
2018/12/12 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
艺术用品:Arteza
2018/11/25 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
装修致歉信
2014/01/15 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
辞职信怎么写
2015/02/27 职场文书
辩护词格式
2015/05/22 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android