添加demo1

wangxinzhang · Sep 23, 2019 · b3a6a87 · b3a6a87
1 parent 45f47c4
commit b3a6a87
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 13 deletions.
diff --git a/src/App.js b/src/App.js
@@ -285,7 +285,10 @@ class App extends React.Component {
     maxLines = maxLines / 1;
     padding = 0 /*  padding / 1 */;
     lineHeight = lineHeight / 1; //和painter调试得出的值
-    shadow = shadow.trim().split(/\s+/).join(' ');
+    shadow = shadow
+      .trim()
+      .split(/\s+/)
+      .join(' ');
     let Shape;
     let config = {
       width, //文字的高度随行高
@@ -447,7 +450,10 @@ class App extends React.Component {
     borderRadius = borderRadius / 1;
     borderWidth = borderWidth / 1;
     rotate = rotate / 1;
-    shadow = shadow.trim().split(/\s+/).join(' ');
+    shadow = shadow
+      .trim()
+      .split(/\s+/)
+      .join(' ');
     let group = new fabric.Group([], {
       left: left + width / 2 + borderWidth,
       top: top + height / 2 + borderWidth,
@@ -539,7 +545,10 @@ class App extends React.Component {
     borderRadius = borderRadius / 1;
     borderWidth = borderWidth / 1;
     rotate = rotate / 1;
-    shadow = shadow.trim().split(/\s+/).join(' ');
+    shadow = shadow
+      .trim()
+      .split(/\s+/)
+      .join(' ');
     let Shape = await this.loadImageUrl(url);
     let imgWidth = Shape.width;
     let imgHeight = Shape.height;
@@ -1276,18 +1285,28 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
         </div>
         <div className='example'>
           {exampleData.map((item, i) => {
-            console.log('item', item);
+            //console.log('item', item);
             return (
               <div
                 className='li'
                 key={i}
                 onClick={() => {
-                  this.setState(
-                    {
-                      importCodeJson: item.json
+                  let that = this;
+                  Modal.confirm({
+                    title: '提示',
+                    content: '确定要导入这个模板吗?',
+                    okText: '确认',
+                    cancelText: '取消',
+                    onOk() {
+                      that.setState(
+                        {
+                          importCodeJson: item.json
+                        },
+                        that.confirmImportCode
+                      );
                     },
-                    this.confirmImportCode
-                  );
+                    onCancel() {}
+                  });
                 }}
               >
                 <img src={item.src} alt='' />

diff --git a/src/App.scss b/src/App.scss
@@ -66,9 +66,21 @@ input {
     }
   }
   .example {
-    width: 400px;
+    width: 440px;
     min-height: 300px;
-    background: #eeeeee;
+    background: #e9fffe;
+    display: flex;
+    justify-content: space-between;
+    .li {
+      width: 200px;
+      height: 306px;
+      margin-top: 10px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 }
 .option {

diff --git a/src/example/example1.jpg b/src/example/example1.jpg
diff --git a/src/example/example1.js b/src/example/example1.js
diff --git a/...5.o6zAJswMXymiQQ6hq4cHOob-Hfn8.aNRpLRvKddTRf0f961305a114b341b1bbfceeac165b0.jpg b/...5.o6zAJswMXymiQQ6hq4cHOob-Hfn8.aNRpLRvKddTRf0f961305a114b341b1bbfceeac165b0.jpg