详解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读取ASP设定的COOKIE
Nov 24 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
小型js框架veryide.librar源代码
Mar 05 Javascript
js 编写规范
Mar 03 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
微信小程序排坑指南详解
May 23 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
js实现适配移动端的拖动效果
Jan 13 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
js简易namespace管理器 实例代码
2013/06/21 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
Angular5.1新功能分享
2017/12/21 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
小学生家长评语大全
2014/02/10 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python