Browse Source

上传图片一行显示3张

narro 6 years ago
parent
commit
0965689c7b

+ 5
- 4
lib/components/Editor/Upload.css View File

1
 .ant-upload-select-picture-card i {
1
 .ant-upload-select-picture-card i {
2
-  font-size: 32px;
3
-  color: #999;
2
+    font-size: 32px;
3
+    color: #999;
4
 }
4
 }
5
+
5
 .ant-upload-select-picture-card .ant-upload-text {
6
 .ant-upload-select-picture-card .ant-upload-text {
6
-  margin-top: 8px;
7
-  color: #666;
7
+    margin-top: 8px;
8
+    color: #666;
8
 }
9
 }

+ 51
- 47
lib/components/Editor/index.css View File

1
 .comment-editor-toolbar {
1
 .comment-editor-toolbar {
2
-  text-align: right;
3
-  padding: 0 20px 10px 0;
2
+    text-align: right;
3
+    padding: 0 20px 10px 0;
4
 }
4
 }
5
 
5
 
6
 .comment-editor-toolbar-error {
6
 .comment-editor-toolbar-error {
7
-  color: red;
7
+    color: red;
8
 }
8
 }
9
 
9
 
10
 .comment-editor {
10
 .comment-editor {
11
-  box-sizing: border-box;
12
-  margin: 0;
13
-  padding: 0;
14
-  width: 100%;
15
-  max-width: 100%;
16
-  list-style: none;
17
-  position: relative;
18
-  display: block;
19
-  font-size: 14px;
20
-  line-height: 1.5;
21
-  color: rgba(0, 0, 0, 0.65);
22
-  background-color: #fff;
23
-  background-image: none;
24
-  border: 1px solid #d9d9d9;
25
-  border-radius: 4px;
26
-  transition: all 0.3s, height 0s;
11
+    box-sizing: border-box;
12
+    margin: 0;
13
+    padding: 0;
14
+    width: 100%;
15
+    max-width: 100%;
16
+    list-style: none;
17
+    position: relative;
18
+    display: block;
19
+    font-size: 14px;
20
+    line-height: 1.5;
21
+    color: rgba(0, 0, 0, 0.65);
22
+    background-color: #fff;
23
+    background-image: none;
24
+    border: 1px solid #d9d9d9;
25
+    border-radius: 4px;
26
+    transition: all 0.3s, height 0s;
27
 }
27
 }
28
 
28
 
29
 .comment-editor textarea.ant-input {
29
 .comment-editor textarea.ant-input {
30
-  border: none;
31
-  border-bottom: 1px solid #eee;
32
-  border-bottom-right-radius: 0;
33
-  border-bottom-left-radius: 0;
30
+    border: none;
31
+    border-bottom: 1px solid #eee;
32
+    border-bottom-right-radius: 0;
33
+    border-bottom-left-radius: 0;
34
 }
34
 }
35
 
35
 
36
 .comment-editor textarea.ant-input:hover {
36
 .comment-editor textarea.ant-input:hover {
37
-  border: none;
38
-  border-bottom: 1px solid #eee;
37
+    border: none;
38
+    border-bottom: 1px solid #eee;
39
 }
39
 }
40
 
40
 
41
 .comment-editor textarea.ant-input:focus {
41
 .comment-editor textarea.ant-input:focus {
42
-  box-shadow: none;
43
-  border-bottom: 1px solid #eee;
42
+    box-shadow: none;
43
+    border-bottom: 1px solid #eee;
44
 }
44
 }
45
 
45
 
46
 .comment-editor [contentEditable="true"]:empty:not(:focus):before {
46
 .comment-editor [contentEditable="true"]:empty:not(:focus):before {
47
-  content: attr(data-text);
48
-  color: #bfbfbf;
47
+    content: attr(data-text);
48
+    color: #bfbfbf;
49
 }
49
 }
50
 
50
 
51
 .comment-editor:focus,
51
 .comment-editor:focus,
52
 .comment-editor:hover {
52
 .comment-editor:hover {
53
-  border-color: #40a9ff;
54
-  outline: 0;
55
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
53
+    border-color: #40a9ff;
54
+    outline: 0;
55
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
56
 }
56
 }
57
 
57
 
58
 .comment-toolbar {
58
 .comment-toolbar {
59
-  display: inline-block;
60
-  width: 100%;
61
-  margin: 5px 0 0 0;
59
+    display: inline-block;
60
+    width: 100%;
61
+    margin: 5px 0 0 0;
62
 }
62
 }
63
 
63
 
64
 .comment-toolbar .comment-toolbar-icon {
64
 .comment-toolbar .comment-toolbar-icon {
65
-  font-size: 23px;
66
-  cursor: pointer;
67
-  transition: color 0.3s;
65
+    font-size: 23px;
66
+    cursor: pointer;
67
+    transition: color 0.3s;
68
 }
68
 }
69
 
69
 
70
 .comment-toolbar .comment-toolbar-icon:hover {
70
 .comment-toolbar .comment-toolbar-icon:hover {
71
-  color: #40a9ff;
71
+    color: #40a9ff;
72
 }
72
 }
73
 
73
 
74
 .comment-toolbar-left {
74
 .comment-toolbar-left {
75
-  float: left;
76
-  margin: 8px 11px;
75
+    float: left;
76
+    margin: 8px 11px;
77
 }
77
 }
78
 
78
 
79
 .comment-toolbar-right {
79
 .comment-toolbar-right {
80
-  float: right;
81
-  margin: 5px 11px;
80
+    float: right;
81
+    margin: 5px 11px;
82
 }
82
 }
83
 
83
 
84
 .comment-emoji-popover .ant-popover-inner-content {
84
 .comment-emoji-popover .ant-popover-inner-content {
85
-  padding: 12px 16px 20px 16px;
85
+    padding: 12px 16px 20px 16px;
86
 }
86
 }
87
 
87
 
88
 .comment-emoji-popover .ant-carousel .slick-dots {
88
 .comment-emoji-popover .ant-carousel .slick-dots {
89
-  bottom: -10px;
89
+    bottom: -10px;
90
 }
90
 }
91
 
91
 
92
 .comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
92
 .comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
93
-  background-color: #7b868a;
93
+    background-color: #7b868a;
94
 }
94
 }
95
 
95
 
96
 .comment-emoji-popover .ant-carousel .slick-dots li button {
96
 .comment-emoji-popover .ant-carousel .slick-dots li button {
97
-  background-color: #a2aeb5;
97
+    background-color: #a2aeb5;
98
 }
98
 }
99
+
100
+.clearfix {
101
+    clear: both;
102
+}

+ 3
- 2
lib/components/Editor/index.js View File

334
                     "div",
334
                     "div",
335
                     {
335
                     {
336
                       style: {
336
                       style: {
337
-                        width: 112 * maxUpload,
337
+                        width: 336, // 一行显示3张
338
                         minHeight: 100,
338
                         minHeight: 100,
339
                         margin: "0 auto"
339
                         margin: "0 auto"
340
                       }
340
                       }
346
                       fileList: this.state.fileList,
346
                       fileList: this.state.fileList,
347
                       showError: this.props.showError,
347
                       showError: this.props.showError,
348
                       onError: this.props.onError
348
                       onError: this.props.onError
349
-                    })
349
+                    }),
350
+                    _react2.default.createElement("div", { className: "clearfix" })
350
                   ),
351
                   ),
351
                   placement: "bottomLeft",
352
                   placement: "bottomLeft",
352
                   title: _react2.default.createElement(
353
                   title: _react2.default.createElement(

+ 1
- 1
lib/components/Editor/index.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
lib/index.js View File

104
           }
104
           }
105
         },
105
         },
106
         _react2.default.createElement(_App.Editor, {
106
         _react2.default.createElement(_App.Editor, {
107
-          maxUpload: 4,
107
+          maxUpload: 9,
108
           autoFocus: true,
108
           autoFocus: true,
109
           beforeSubmit: function beforeSubmit() {
109
           beforeSubmit: function beforeSubmit() {
110
             return new Promise(function (resolve) {
110
             return new Promise(function (resolve) {

+ 1
- 1
lib/index.js.map
File diff suppressed because it is too large
View File


+ 1
- 0
src/components/Editor/Upload.css View File

2
   font-size: 32px;
2
   font-size: 32px;
3
   color: #999;
3
   color: #999;
4
 }
4
 }
5
+
5
 .ant-upload-select-picture-card .ant-upload-text {
6
 .ant-upload-select-picture-card .ant-upload-text {
6
   margin-top: 8px;
7
   margin-top: 8px;
7
   color: #666;
8
   color: #666;

+ 4
- 0
src/components/Editor/index.css View File

96
 .comment-emoji-popover .ant-carousel .slick-dots li button {
96
 .comment-emoji-popover .ant-carousel .slick-dots li button {
97
   background-color: #a2aeb5;
97
   background-color: #a2aeb5;
98
 }
98
 }
99
+
100
+.clearfix {
101
+  clear: both;
102
+}

+ 2
- 1
src/components/Editor/index.js View File

227
                   content={
227
                   content={
228
                     <div
228
                     <div
229
                       style={{
229
                       style={{
230
-                        width: 112 * maxUpload,
230
+                        width: 336, // 一行显示3张
231
                         minHeight: 100,
231
                         minHeight: 100,
232
                         margin: "0 auto"
232
                         margin: "0 auto"
233
                       }}
233
                       }}
240
                         showError={this.props.showError}
240
                         showError={this.props.showError}
241
                         onError={this.props.onError}
241
                         onError={this.props.onError}
242
                       />
242
                       />
243
+                      <div className="clearfix" />
243
                     </div>
244
                     </div>
244
                   }
245
                   }
245
                   placement="bottomLeft"
246
                   placement="bottomLeft"

+ 1
- 1
src/index.js View File

61
         }}
61
         }}
62
       >
62
       >
63
         <Editor
63
         <Editor
64
-          maxUpload={4}
64
+          maxUpload={9}
65
           autoFocus
65
           autoFocus
66
           beforeSubmit={() => {
66
           beforeSubmit={() => {
67
             return new Promise(resolve => {
67
             return new Promise(resolve => {