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 /* 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 */