vant components

test/unit/components/badge.vue

@@ -0,0 +1,22 @@
+<template>
+  <van-badge-group>
+    <van-badge title="热销榜" info="8" @click="onItemClick"></van-badge>
+    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
+  </van-badge-group>
+</template>
+
+<script>
+import Badge from 'packages/badge';
+import BadgeGroup from 'packages/badge-group';
+
+export default {
+  components: {
+    'van-badge': Badge,
+    'van-badge-group': BadgeGroup
+  },
+
+  methods: {
+    onItemClick() {}
+  }
+};
+</script>

test/unit/components/checkbox.vue

@@ -0,0 +1,29 @@
+<template>
+  <van-checkbox-group v-model="result">
+    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+  </van-checkbox-group>
+</template>
+
+<script>
+import Checkbox from 'packages/checkbox';
+import CheckboxGroup from 'packages/checkbox-group';
+
+export default {
+  components: {
+    'van-checkbox': Checkbox,
+    'van-checkbox-group': CheckboxGroup
+  },
+
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c',
+        'd'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>

test/unit/components/radio.vue

@@ -0,0 +1,24 @@
+<template>
+  <van-radio-group v-model="radio">
+    <van-radio name="1">单选框1</van-radio>
+    <van-radio name="2">单选框2</van-radio>
+  </van-radio-group>
+</template>
+  
+<script>
+import Radio from 'packages/radio';
+import RadioGroup from 'packages/radio-group';
+
+export default {
+  components: {
+    'van-radio': Radio,
+    'van-radio-group': RadioGroup
+  },
+
+  data() {
+    return {
+      radio: '1'
+    };
+  }
+};
+</script>

test/unit/components/steps.vue

@@ -0,0 +1,26 @@
+<template>
+  <van-steps :active="active">
+    <van-step>买家下单</van-step>
+    <van-step>商家接单</van-step>
+    <van-step>买家提货</van-step>
+    <van-step>交易完成</van-step>
+  </van-steps>
+</template>
+
+<script>
+import Steps from 'packages/steps';
+import Step from 'packages/step';
+
+export default {
+  components: {
+    'van-step': Step,
+    'van-steps': Steps
+  },
+
+  data() {
+    return {
+      active: 1
+    };
+  }
+};
+</script>

test/unit/components/tabs.vue

@@ -0,0 +1,21 @@
+<template>
+  <van-tabs>
+    <van-tab title="选项一">内容一</van-tab>
+    <van-tab title="选项二" disabled>内容二</van-tab>
+    <van-tab title="选项三">内容三</van-tab>
+    <van-tab title="选项四">内容四</van-tab>
+    <van-tab title="选项五">内容五</van-tab>
+  </van-tabs>
+</template>
+
+<script>
+import Tab from 'packages/tab';
+import Tabs from 'packages/tabs';
+
+export default {
+  components: {
+    'van-tab': Tab,
+    'van-tabs': Tabs
+  }
+};
+</script>

test/unit/components/waterfall.vue

@@ -0,0 +1,49 @@
+<script>
+  import Waterfall from 'packages/waterfall';
+
+  export default {
+    props: {
+      disabled: Boolean,
+      list: Array,
+      onWaterfallLower: {
+        type: Function,
+        default() {
+          return function() {};
+        }
+      },
+      onWaterfallUpper: {
+        type: Function,
+        default() {
+          return function() {};
+        }
+      }
+    },
+    directives: {
+      WaterfallLower: Waterfall('lower'),
+      WaterfallUpper: Waterfall('upper')
+    },
+    methods: {
+      triggerWaterfallLower() {
+        console.log('waterfall lower trigger');
+        this.onWaterfallLower();
+      },
+      triggerWaterfallUpper() {
+        console.log('waterfall upper trigger');
+        this.onWaterfallUpper();
+      }
+    }
+  };
+</script>
+
+<template>
+  <div
+    v-waterfall-lower="triggerWaterfallLower"
+    v-waterfall-upper="triggerWaterfallUpper"
+    waterfall-disabled="disabled"
+  >
+    <div
+      v-for="item in list"
+      class="waterfall-item"
+    >{{ item.id }}</div>
+  </div>
+</template>