grid: fix slot and add event:on-item-click. close #781

airyland · Jan 19, 2017 · 6bbf01d · 6bbf01d
1 parent 87878d0
commit 6bbf01d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vux",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "Mobile web UI based on Vue and WeUI",
   "keywords": [
     "vux",

diff --git a/src/components/grid/grid-item.vue b/src/components/grid/grid-item.vue
@@ -3,7 +3,7 @@
     <div class="weui-grid__icon">
       <slot name="icon"><img :src="icon" alt=""></slot>
     </div>
-    <p class="weui-grid__label" v-if="label" v-html="label"><slot name="label"></slot></p>
+    <p class="weui-grid__label"><slot name="label"><span v-html="label"></span></slot></p>
     <slot></slot>
    </a>
 </template>
@@ -15,6 +15,7 @@ export default {
   props: ['icon', 'label', 'link'],
   methods: {
     onClick () {
+      this.$emit('on-item-click')
       go(this.link, this.$router)
     }
   }

diff --git a/src/demos/Grid.vue b/src/demos/Grid.vue
@@ -10,6 +10,10 @@
       <grid-item :link="{ path: '/component/cell'}" :label="$t('Go to Cell')">
         <img slot="icon" src="../assets/grid_icon.png">
       </grid-item>
+      <grid-item link="/component/cell" @on-item-click="onItemClick">
+        <img slot="icon" src="../assets/grid_icon.png">
+        <span slot="label">{{ $t('Go to Cell') }}</span>
+      </grid-item>
     </grid>
   </div>
 </template>
@@ -28,6 +32,11 @@ export default {
   components: {
     Grid,
     GridItem
+  },
+  methods: {
+    onItemClick () {
+      console.log('on item click')
+    }
   }
 }
 </script>