详解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入门教程(8) Location地址对象
Jan 31 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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自动重命名文件实现方法
2014/11/04 PHP
PHP实现简单登录界面
2019/10/23 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
Vuex简单入门
2017/04/19 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python实现多人聊天室
2020/03/31 Python
python对日志进行处理的实例代码
2018/10/06 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python tcp传输代码实例解析
2020/03/18 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
风险评估实施方案
2014/03/09 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
大学校务公开实施方案
2014/03/31 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Python OpenCV超详细讲解基本功能
2022/04/02 Python