elementUI的现成框架, 缺少样式, el-image样式没有, 已解决
原文链接: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 */
加上样式之后, 预览图片可以正确比例显示了, 但是下方图标只有左侧的三个, 放大缩小和最大化, 就先这样吧, 又不是不能用
赞 (0)