经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
elementUI的现成框架, 缺少样式, el-image样式没有, 已解决 - CN-无忧
来源:cnblogs  作者:CN-无忧  时间:2020/11/9 15:18:42  对本文有异议

原文链接:https://www.cnblogs.com/zizaiwuyou/p/13936063.html

前端时间要做一个上传并预览图片的功能, 前端用的库是elementUI, 有图片的控件el-image, 但是我预览的时候遇到一个问题

官方的预览效果如下:

 

 但是我的预览效果, 下方的五个按钮, 只有放大缩小, 而且图片是拉抻铺满页面的

我调查发现是由于这个现成框架内的elementUI太老了, 没有对应的样式, 所有我上elementUI的最新文档内把el-image的对应样式复制出来, 如下:

  1. 1 /* elementUI的图片组件样式 */
  2. 2 .el-image-viewer__btn,.el-step__icon-inner {
  3. 3 -webkit-user-select:none;
  4. 4 -moz-user-select:none;
  5. 5 -ms-user-select:none
  6. 6 }
  7. 7 .el-image__error,.el-timeline-item__dot {
  8. 8 display:-webkit-box;
  9. 9 display:-ms-flexbox
  10. 10 }
  11. 11 .el-image__error,.el-image__placeholder {
  12. 12 background:#F5F7FA
  13. 13 }
  14. 14 .el-divider__text.is-left {
  15. 15 left:20px;
  16. 16 -webkit-transform:translateY(-50%);
  17. 17 transform:translateY(-50%)
  18. 18 }
  19. 19 .el-divider__text.is-center {
  20. 20 left:50%;
  21. 21 -webkit-transform:translateX(-50%) translateY(-50%);
  22. 22 transform:translateX(-50%) translateY(-50%)
  23. 23 }
  24. 24 .el-divider__text.is-right {
  25. 25 right:20px;
  26. 26 -webkit-transform:translateY(-50%);
  27. 27 transform:translateY(-50%)
  28. 28 }
  29. 29 .el-image__error,.el-image__inner,.el-image__placeholder {
  30. 30 width:100%;
  31. 31 height:100%
  32. 32 }
  33. 33 .el-image {
  34. 34 position:relative;
  35. 35 display:inline-block;
  36. 36 overflow:hidden
  37. 37 }
  38. 38 .el-image__inner {
  39. 39 vertical-align:top
  40. 40 }
  41. 41 .el-image__inner--center {
  42. 42 position:relative;
  43. 43 top:50%;
  44. 44 left:50%;
  45. 45 -webkit-transform:translate(-50%,-50%);
  46. 46 transform:translate(-50%,-50%);
  47. 47 display:block
  48. 48 }
  49. 49 .el-image__error {
  50. 50 display:flex;
  51. 51 -webkit-box-pack:center;
  52. 52 -ms-flex-pack:center;
  53. 53 justify-content:center;
  54. 54 -webkit-box-align:center;
  55. 55 -ms-flex-align:center;
  56. 56 align-items:center;
  57. 57 font-size:14px;
  58. 58 color:#C0C4CC;
  59. 59 vertical-align:middle
  60. 60 }
  61. 61 .el-image__preview {
  62. 62 cursor:pointer
  63. 63 }
  64. 64 .el-image-viewer__wrapper {
  65. 65 position:fixed;
  66. 66 top:0;
  67. 67 right:0;
  68. 68 bottom:0;
  69. 69 left:0
  70. 70 }
  71. 71 .el-image-viewer__btn {
  72. 72 position:absolute;
  73. 73 z-index:1;
  74. 74 display:-webkit-box;
  75. 75 display:-ms-flexbox;
  76. 76 display:flex;
  77. 77 -webkit-box-align:center;
  78. 78 -ms-flex-align:center;
  79. 79 align-items:center;
  80. 80 -webkit-box-pack:center;
  81. 81 -ms-flex-pack:center;
  82. 82 justify-content:center;
  83. 83 border-radius:50%;
  84. 84 opacity:.8;
  85. 85 cursor:pointer;
  86. 86 -webkit-box-sizing:border-box;
  87. 87 box-sizing:border-box;
  88. 88 user-select:none
  89. 89 }
  90. 90 .el-button,.el-checkbox {
  91. 91 -webkit-user-select:none;
  92. 92 -moz-user-select:none;
  93. 93 -ms-user-select:none
  94. 94 }
  95. 95 .el-image-viewer__close {
  96. 96 top:40px;
  97. 97 right:40px;
  98. 98 width:40px;
  99. 99 height:40px;
  100. 100 font-size:40px
  101. 101 }
  102. 102 .el-image-viewer__canvas {
  103. 103 width:100%;
  104. 104 height:100%;
  105. 105 display:-webkit-box;
  106. 106 display:-ms-flexbox;
  107. 107 display:flex;
  108. 108 -webkit-box-pack:center;
  109. 109 -ms-flex-pack:center;
  110. 110 justify-content:center;
  111. 111 -webkit-box-align:center;
  112. 112 -ms-flex-align:center;
  113. 113 align-items:center
  114. 114 }
  115. 115 .el-image-viewer__actions {
  116. 116 left:50%;
  117. 117 bottom:30px;
  118. 118 -webkit-transform:translateX(-50%);
  119. 119 transform:translateX(-50%);
  120. 120 width:282px;
  121. 121 height:44px;
  122. 122 padding:0 23px;
  123. 123 background-color:#606266;
  124. 124 border-color:#fff;
  125. 125 border-radius:22px
  126. 126 }
  127. 127 .el-image-viewer__actions__inner {
  128. 128 width:100%;
  129. 129 height:100%;
  130. 130 text-align:justify;
  131. 131 cursor:default;
  132. 132 font-size:23px;
  133. 133 color:#fff;
  134. 134 display:-webkit-box;
  135. 135 display:-ms-flexbox;
  136. 136 display:flex;
  137. 137 -webkit-box-align:center;
  138. 138 -ms-flex-align:center;
  139. 139 align-items:center;
  140. 140 -ms-flex-pack:distribute;
  141. 141 justify-content:space-around
  142. 142 }
  143. 143 .el-image-viewer__next,.el-image-viewer__prev {
  144. 144 top:50%;
  145. 145 width:44px;
  146. 146 height:44px;
  147. 147 font-size:24px;
  148. 148 color:#fff;
  149. 149 background-color:#606266;
  150. 150 border-color:#fff
  151. 151 }
  152. 152 .el-image-viewer__prev {
  153. 153 -webkit-transform:translateY(-50%);
  154. 154 transform:translateY(-50%);
  155. 155 left:40px
  156. 156 }
  157. 157 .el-image-viewer__next {
  158. 158 -webkit-transform:translateY(-50%);
  159. 159 transform:translateY(-50%);
  160. 160 right:40px;
  161. 161 text-indent:2px
  162. 162 }
  163. 163 .el-image-viewer__mask {
  164. 164 position:absolute;
  165. 165 width:100%;
  166. 166 height:100%;
  167. 167 top:0;
  168. 168 left:0;
  169. 169 opacity:.5;
  170. 170 background:#000
  171. 171 }
  172. 172 .viewer-fade-enter-active {
  173. 173 -webkit-animation:viewer-fade-in .3s;
  174. 174 animation:viewer-fade-in .3s
  175. 175 }
  176. 176 .viewer-fade-leave-active {
  177. 177 -webkit-animation:viewer-fade-out .3s;
  178. 178 animation:viewer-fade-out .3s
  179. 179 }
  180. 180 @-webkit-keyframes viewer-fade-in {
  181. 181 0% {
  182. 182 -webkit-transform:translate3d(0,-20px,0);
  183. 183 transform:translate3d(0,-20px,0);
  184. 184 opacity:0
  185. 185 }
  186. 186 100% {
  187. 187 -webkit-transform:translate3d(0,0,0);
  188. 188 transform:translate3d(0,0,0);
  189. 189 opacity:1
  190. 190 }
  191. 191 }@keyframes viewer-fade-in {
  192. 192 0% {
  193. 193 -webkit-transform:translate3d(0,-20px,0);
  194. 194 transform:translate3d(0,-20px,0);
  195. 195 opacity:0
  196. 196 }
  197. 197 100% {
  198. 198 -webkit-transform:translate3d(0,0,0);
  199. 199 transform:translate3d(0,0,0);
  200. 200 opacity:1
  201. 201 }
  202. 202 }@-webkit-keyframes viewer-fade-out {
  203. 203 0% {
  204. 204 -webkit-transform:translate3d(0,0,0);
  205. 205 transform:translate3d(0,0,0);
  206. 206 opacity:1
  207. 207 }
  208. 208 100% {
  209. 209 -webkit-transform:translate3d(0,-20px,0);
  210. 210 transform:translate3d(0,-20px,0);
  211. 211 opacity:0
  212. 212 }
  213. 213 }@keyframes viewer-fade-out {
  214. 214 0% {
  215. 215 -webkit-transform:translate3d(0,0,0);
  216. 216 transform:translate3d(0,0,0);
  217. 217 opacity:1
  218. 218 }
  219. 219 100% {
  220. 220 -webkit-transform:translate3d(0,-20px,0);
  221. 221 transform:translate3d(0,-20px,0);
  222. 222 opacity:0
  223. 223 }
  224. 224 }
  225. 225 /* elementUI的图片组件样式 END */

加上样式之后, 预览图片可以正确比例显示了, 但是下方图标只有左侧的三个, 放大缩小和最大化, 就先这样吧, 又不是不能用

 

原文链接:http://www.cnblogs.com/zizaiwuyou/p/13936063.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号