feat: update example

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "easy-canvas-layout": "0.0.1",
+    "easy-canvas-layout": "0.0.8",
     "vue": "^2.6.11"
   },
   "devDependencies": {

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ec-canvas :width="300" :height="600">
+    <ec-canvas :width="300" :height="600" debug>
       <ec-scroll-view :styles="{height:600}">
 
         <ec-view :styles="styles.imageWrapper">
@@ -10,6 +10,40 @@
           </ec-view>
         </ec-view>
 
+        <ec-view :styles="{padding:[10,5,5,5],backgroundColor:'#F2F6FC'}">
+          <ec-view 
+          :styles="{display:'inline-block',textAlign:'center',width:'25%',margin:5,}"
+          v-for="(item,index) in examples" 
+          :key="index"
+          :on="{
+            click(e){
+              window.location.href = host + item.url
+            }
+          }">
+            <ec-view :styles="{textAlign:'center'}">
+              <ec-image :styles="{width:40,height:40,display:'inline-block',borderRadius:4}" mode="aspectFill" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg" />
+            </ec-view>
+            <ec-view :styles="{textAlign:'center'}">
+              <ec-text :styles="{fontSize:10,maxLine:1,color:'#333'}">{{item.title}}</ec-text>
+            </ec-view>
+            <ec-view v-if="item.tag"
+              :styles="{
+                position:'absolute',
+                right:0,
+                top:-4,
+                backgroundColor:'#f00',
+                color:'#fff',
+                textAlign:'center',
+                fontSize:8,
+                lineHeight:12,
+                padding:[0,4],
+                borderRadius:7
+              }">
+              <ec-text>{{item.tag}}</ec-text>
+            </ec-view>
+          </ec-view>
+        </ec-view>
+
         <ec-view :styles="styles.itemWrapper" 
           v-for="(item,index) in examples" 
           :key="index"
@@ -19,7 +53,10 @@
             }
           }">
           <ec-view :styles="styles.title">
-            <ec-text>{{item.title}}</ec-text>
+            <ec-view :styles="{flex:1}">
+              <ec-text>{{item.title}}</ec-text>
+            </ec-view>
+            <ec-image src="/images/arrow-right.png" :styles="{width:20}"></ec-image>
           </ec-view>
           <ec-view :styles="styles.desc">
             <ec-text>{{item.desc}}</ec-text>
@@ -50,12 +87,12 @@ export default {
             padding: 10,
             marginBottom: 10,
         },
-        title:{ color: '#333', fontSize: 18, fontWeight: 800 },
+        title:{ color: '#333', fontSize: 18, fontWeight: 800,display:'flex' },
         desc: { color: '#999' }
       },
 
       examples : [
-        { title: 'Basic', desc: '基本布局', url: 'basic.html' },
+        { title: 'Basic', desc: '基本布局', url: 'basic.html',tag:'Hot' },
         { title: 'Event 事件', desc: '事件监听', url: 'event.html' },
         { title: 'Image 图片', desc: '图片缩放类型', url: 'image.html' },
         { title: 'Demo', desc: '展示了滚动、事件、flex布局、文本换行对齐等能力', url: 'test.html' },

src/components/canvas.vue

@@ -17,6 +17,10 @@ export default {
         height:{
             type:Number,
             default:300
+        },
+        debug:{
+            type:Boolean,
+            default:false
         }
     },
     data(){
@@ -61,7 +65,7 @@ export default {
             this.layer = easyCanvas.createLayer(this.ctx,{
                 dpr,
                 width:w,
-                height:h,
+                height:h
             })
         },
 
@@ -107,13 +111,13 @@ function generate(node,c){
         return c((h) => h(node.tag,{
             styles:node.styles,
             attrs:node.$attrs,
-            on:node.on
+            on:node.on || {}
         },node.$el.innerText))
     }else{
         return c((h) => h(node.tag,{
             styles:node.styles,
             attrs:node.$attrs,
-            on:node.on
+            on:node.on || {}
         },children))
     }
 }