ソースを参照

上传图片一行显示3张

narro 6 年 前
コミット
0965689c7b

+ 5
- 4
lib/components/Editor/Upload.css ファイルの表示

@@ -1,8 +1,9 @@
1 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 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 ファイルの表示

@@ -1,98 +1,102 @@
1 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 6
 .comment-editor-toolbar-error {
7
-  color: red;
7
+    color: red;
8 8
 }
9 9
 
10 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 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 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 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 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 51
 .comment-editor:focus,
52 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 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 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 70
 .comment-toolbar .comment-toolbar-icon:hover {
71
-  color: #40a9ff;
71
+    color: #40a9ff;
72 72
 }
73 73
 
74 74
 .comment-toolbar-left {
75
-  float: left;
76
-  margin: 8px 11px;
75
+    float: left;
76
+    margin: 8px 11px;
77 77
 }
78 78
 
79 79
 .comment-toolbar-right {
80
-  float: right;
81
-  margin: 5px 11px;
80
+    float: right;
81
+    margin: 5px 11px;
82 82
 }
83 83
 
84 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 88
 .comment-emoji-popover .ant-carousel .slick-dots {
89
-  bottom: -10px;
89
+    bottom: -10px;
90 90
 }
91 91
 
92 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 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 ファイルの表示

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

+ 1
- 1
lib/components/Editor/index.js.map
ファイル差分が大きすぎるため省略します
ファイルの表示


+ 1
- 1
lib/index.js ファイルの表示

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

+ 1
- 1
lib/index.js.map
ファイル差分が大きすぎるため省略します
ファイルの表示


+ 1
- 0
src/components/Editor/Upload.css ファイルの表示

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

+ 4
- 0
src/components/Editor/index.css ファイルの表示

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

+ 2
- 1
src/components/Editor/index.js ファイルの表示

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

+ 1
- 1
src/index.js ファイルの表示

@@ -61,7 +61,7 @@ class Index extends Component {
61 61
         }}
62 62
       >
63 63
         <Editor
64
-          maxUpload={4}
64
+          maxUpload={9}
65 65
           autoFocus
66 66
           beforeSubmit={() => {
67 67
             return new Promise(resolve => {