说明项目集成vue-flickity组件后，发现flickity官网对该组件的全屏配置不起作用。实现方法需要添加flickity-fullscreen组件。在main.js中引入flickity-fullscreen组件，并添加flickity组件的fullscreen属性来定义全屏。CSS样式具体步骤1.添加flickity-fullscreen组件需要提前配置flickityyarn:yarnaddflickity-fullscreen--savenpm:npminstallflickity-fullscreenBower:bowerinstallflickity-fullscreen2.在main.js3中导入flickity-fullscreen组件。添加flickity组件的fullscreen属性4.定义全屏的CSS样式/*展开全屏按钮样式*/.flickity-fullscreen-button-view{position:absolute;宽度：自动；高度：自动；z指数：999999；顶部：0；右：0；填充：5px10px；边界半径：5px；box-shadow:0010px#0000000f;}/*退出全屏按钮样式,*setdisplay:none;防止页面同时显示[展开全屏按钮]和[退出全屏按钮]*/.flickity-fullscreen-button-exit{display:none;}/*点击全屏显示效果*/.is-fullscreen{位置：固定；z-指数：1100；高度：100vh；宽度：100vw；顶部：0；左：0；背景：#0000009e；}/*全屏显示时，隐藏【展开全屏按钮】*/.is-fullscreen.flickity-fullscreen-button-view{display:none;}/*全屏显示时，在页面右上方显示【退出全屏按钮】设置按钮*/.is-fullscreen.flickity-fullscreen-button-exit{display：堵塞;位置：绝对；宽度：自动；高度：自动；z指数：999999；顶部：0；填充：5px10px；边界半径：5px；框阴影：0010px#0000000f；选中图片大小为全屏*/.is-fullscreen.is-selected{width:100vw!important;height:100vh!important;}/*设置选中的图片适应屏幕尺寸，并根据屏幕尺寸缩放*/.is-fullscreen.carousel-img{width:auto!important;高度：自动！重要；最大宽度：100%！重要；max-height:100%!important;}/*取消展开退出按钮点击的边框样式*/.flickity-button:focus{box-shadow:unset;;}/*设置展开退出按钮的宽度*/.flickity-button-icon{width:20px;}实际效果Tips不能点击图片显示全屏，只能暂时点击全屏按钮在全屏状态下没有左右箭头，但是可以左右滑动切换图片。参考https://github.com/metafizzy/...https://github.com/drewjbartl...
