Merge pull request #6 from iview/dewyzee/dev

add new components && examples

Author: Dewyzee

dist/components/grid-icon/grid-icon.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="i-class i-grid-icon" v-bind:class="iClass">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    iClass: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

dist/components/grid-icon/index.js

@@ -0,0 +1,3 @@
+import gridIcon from 'grid-icon.vue'
+
+export default gridIcon

dist/components/grid-icon/style/css.js

@@ -0,0 +1 @@
+import './grid-icon.css'

dist/components/grid-icon/style/grid-icon.css

@@ -0,0 +1,10 @@
+.i-grid-icon {
+  display: block;
+  width: 28px;
+  height: 28px;
+  margin: 0 auto;
+}
+.i-grid-icon image {
+  width: 100%;
+  height: 100%;
+}

dist/components/grid-icon/style/grid-icon.less

@@ -0,0 +1,13 @@
+@import '../../common/_base.less';
+
+.i-grid-icon {
+  display: block;
+  width: @size-grid-icon;
+  height: @size-grid-icon;
+  margin: 0 auto;
+
+  image{
+      width: 100%;
+      height: 100%;
+  }
+}

dist/components/grid-icon/style/index.js

@@ -0,0 +1 @@
+import './grid-icon.less'

dist/components/grid-item/grid-item.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="i-class i-grid-item" v-bind:class="iClass" @click.stop="bindTap">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    iClass: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    bindTap(evt) {
+      this.$emit('click', evt)
+    }
+  },
+}
+</script>

dist/components/grid-item/index.js

@@ -0,0 +1,3 @@
+import gridItem from 'grid-item.vue'
+
+export default gridItem

dist/components/grid-item/style/css.js

@@ -0,0 +1 @@
+import './grid-item.css'

dist/components/grid-item/style/grid-item.css

@@ -0,0 +1,12 @@
+.i-grid-item {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  float: left;
+  padding: 20px 10px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border-right: 1rpx solid #e9eaec;
+  border-bottom: 1rpx solid #e9eaec;
+}