原文链接:https://www.cnblogs.com/zizaiwuyou/p/13936063.html
前端时间要做一个上传并预览图片的功能, 前端用的库是elementUI, 有图片的控件el-image, 但是我预览的时候遇到一个问题
官方的预览效果如下:
但是我的预览效果, 下方的五个按钮, 只有放大缩小, 而且图片是拉抻铺满页面的
我调查发现是由于这个现成框架内的elementUI太老了, 没有对应的样式, 所有我上elementUI的最新文档内把el-image的对应样式复制出来, 如下:
1 /* elementUI的图片组件样式 */ 2 .el-image-viewer__btn,.el-step__icon-inner { 3 -webkit-user-select:none; 4 -moz-user-select:none; 5 -ms-user-select:none 6 } 7 .el-image__error,.el-timeline-item__dot { 8 display:-webkit-box; 9 display:-ms-flexbox 10 } 11 .el-image__error,.el-image__placeholder { 12 background:#F5F7FA 13 } 14 .el-divider__text.is-left { 15 left:20px; 16 -webkit-transform:translateY(-50%); 17 transform:translateY(-50%) 18 } 19 .el-divider__text.is-center { 20 left:50%; 21 -webkit-transform:translateX(-50%) translateY(-50%); 22 transform:translateX(-50%) translateY(-50%) 23 } 24 .el-divider__text.is-right { 25 right:20px; 26 -webkit-transform:translateY(-50%); 27 transform:translateY(-50%) 28 } 29 .el-image__error,.el-image__inner,.el-image__placeholder { 30 width:100%; 31 height:100% 32 } 33 .el-image { 34 position:relative; 35 display:inline-block; 36 overflow:hidden 37 } 38 .el-image__inner { 39 vertical-align:top 40 } 41 .el-image__inner--center { 42 position:relative; 43 top:50%; 44 left:50%; 45 -webkit-transform:translate(-50%,-50%); 46 transform:translate(-50%,-50%); 47 display:block 48 } 49 .el-image__error { 50 display:flex; 51 -webkit-box-pack:center; 52 -ms-flex-pack:center; 53 justify-content:center; 54 -webkit-box-align:center; 55 -ms-flex-align:center; 56 align-items:center; 57 font-size:14px; 58 color:#C0C4CC; 59 vertical-align:middle 60 } 61 .el-image__preview { 62 cursor:pointer 63 } 64 .el-image-viewer__wrapper { 65 position:fixed; 66 top:0; 67 right:0; 68 bottom:0; 69 left:0 70 } 71 .el-image-viewer__btn { 72 position:absolute; 73 z-index:1; 74 display:-webkit-box; 75 display:-ms-flexbox; 76 display:flex; 77 -webkit-box-align:center; 78 -ms-flex-align:center; 79 align-items:center; 80 -webkit-box-pack:center; 81 -ms-flex-pack:center; 82 justify-content:center; 83 border-radius:50%; 84 opacity:.8; 85 cursor:pointer; 86 -webkit-box-sizing:border-box; 87 box-sizing:border-box; 88 user-select:none 89 } 90 .el-button,.el-checkbox { 91 -webkit-user-select:none; 92 -moz-user-select:none; 93 -ms-user-select:none 94 } 95 .el-image-viewer__close { 96 top:40px; 97 right:40px; 98 width:40px; 99 height:40px; 100 font-size:40px 101 } 102 .el-image-viewer__canvas { 103 width:100%; 104 height:100%; 105 display:-webkit-box; 106 display:-ms-flexbox; 107 display:flex; 108 -webkit-box-pack:center; 109 -ms-flex-pack:center; 110 justify-content:center; 111 -webkit-box-align:center; 112 -ms-flex-align:center; 113 align-items:center 114 } 115 .el-image-viewer__actions { 116 left:50%; 117 bottom:30px; 118 -webkit-transform:translateX(-50%); 119 transform:translateX(-50%); 120 width:282px; 121 height:44px; 122 padding:0 23px; 123 background-color:#606266; 124 border-color:#fff; 125 border-radius:22px 126 } 127 .el-image-viewer__actions__inner { 128 width:100%; 129 height:100%; 130 text-align:justify; 131 cursor:default; 132 font-size:23px; 133 color:#fff; 134 display:-webkit-box; 135 display:-ms-flexbox; 136 display:flex; 137 -webkit-box-align:center; 138 -ms-flex-align:center; 139 align-items:center; 140 -ms-flex-pack:distribute; 141 justify-content:space-around 142 } 143 .el-image-viewer__next,.el-image-viewer__prev { 144 top:50%; 145 width:44px; 146 height:44px; 147 font-size:24px; 148 color:#fff; 149 background-color:#606266; 150 border-color:#fff 151 } 152 .el-image-viewer__prev { 153 -webkit-transform:translateY(-50%); 154 transform:translateY(-50%); 155 left:40px 156 } 157 .el-image-viewer__next { 158 -webkit-transform:translateY(-50%); 159 transform:translateY(-50%); 160 right:40px; 161 text-indent:2px 162 } 163 .el-image-viewer__mask { 164 position:absolute; 165 width:100%; 166 height:100%; 167 top:0; 168 left:0; 169 opacity:.5; 170 background:#000 171 } 172 .viewer-fade-enter-active { 173 -webkit-animation:viewer-fade-in .3s; 174 animation:viewer-fade-in .3s 175 } 176 .viewer-fade-leave-active { 177 -webkit-animation:viewer-fade-out .3s; 178 animation:viewer-fade-out .3s 179 } 180 @-webkit-keyframes viewer-fade-in { 181 0% { 182 -webkit-transform:translate3d(0,-20px,0); 183 transform:translate3d(0,-20px,0); 184 opacity:0 185 } 186 100% { 187 -webkit-transform:translate3d(0,0,0); 188 transform:translate3d(0,0,0); 189 opacity:1 190 } 191 }@keyframes viewer-fade-in { 192 0% { 193 -webkit-transform:translate3d(0,-20px,0); 194 transform:translate3d(0,-20px,0); 195 opacity:0 196 } 197 100% { 198 -webkit-transform:translate3d(0,0,0); 199 transform:translate3d(0,0,0); 200 opacity:1 201 } 202 }@-webkit-keyframes viewer-fade-out { 203 0% { 204 -webkit-transform:translate3d(0,0,0); 205 transform:translate3d(0,0,0); 206 opacity:1 207 } 208 100% { 209 -webkit-transform:translate3d(0,-20px,0); 210 transform:translate3d(0,-20px,0); 211 opacity:0 212 } 213 }@keyframes viewer-fade-out { 214 0% { 215 -webkit-transform:translate3d(0,0,0); 216 transform:translate3d(0,0,0); 217 opacity:1 218 } 219 100% { 220 -webkit-transform:translate3d(0,-20px,0); 221 transform:translate3d(0,-20px,0); 222 opacity:0 223 } 224 } 225 /* elementUI的图片组件样式 END */
加上样式之后, 预览图片可以正确比例显示了, 但是下方图标只有左侧的三个, 放大缩小和最大化, 就先这样吧, 又不是不能用