girds-item增加type a，以满足grids-item有时需要跳转外部链接的需求

ydcss · Nov 6, 2017 · bf03940 · bf03940
1 parent 7344d67
commit bf03940
Showing 1 changed file with 38 additions and 23 deletions.
diff --git a/src/components/grids/src/grids-item.vue b/src/components/grids/src/grids-item.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-link class="yd-grids-item" :to="link || ''" :style="styles" :class="$parent.itemHeight != 0 ? 'yd-grids-item-center' : ''">
+    <router-link class="yd-grids-item" :to="link || ''" :style="styles" :class="$parent.itemHeight != 0 ? 'yd-grids-item-center' : ''" v-if="type == 'link'">
         <div class="yd-grids-icon" v-if="checkIcon">
             <slot name="icon"></slot>
         </div>
@@ -8,33 +8,48 @@
         </div>
         <slot name="else"></slot>
     </router-link>
+    <a class="yd-grids-item" :href="link || ''" :style="styles" :class="$parent.itemHeight != 0 ? 'yd-grids-item-center' : ''" v-else-if="type == 'a'">
+        <div class="yd-grids-icon" v-if="checkIcon">
+            <slot name="icon"></slot>
+        </div>
+        <div class="yd-grids-txt" v-if="checkText">
+            <slot name="text"></slot>
+        </div>
+        <slot name="else"></slot>
+    </a>
 </template>
 
 <script type="text/babel">
-    export default {
-        name: 'yd-grids-item',
-        props: {
-            link: [String, Object]
-        },
-        computed: {
-            checkIcon() {
-                return !!this.$slots.icon;
-            },
-            checkText() {
-                return !!this.$slots.text;
-            },
-            styles() {
-                if(this.$parent.itemHeight != 0) {
-                    return {
-                        height: this.$parent.itemHeight,
-                        padding: 0
-                    }
-                }
-            }
-        }
+export default {
+  name: "yd-grids-item",
+  props: {
+    type: {
+      validator(value) {
+        return ["link", "a"].indexOf(value) > -1;
+      },
+      default: "link"
+    },
+    link: [String, Object]
+  },
+  computed: {
+    checkIcon() {
+      return !!this.$slots.icon;
+    },
+    checkText() {
+      return !!this.$slots.text;
+    },
+    styles() {
+      if (this.$parent.itemHeight != 0) {
+        return {
+          height: this.$parent.itemHeight,
+          padding: 0
+        };
+      }
     }
+  }
+};
 </script>
 
 <style lang="less">
-    @import '../../../styles/components/grids.less';
+@import "../../../styles/components/grids.less";
 </style>