add CellSwitch component

docs/examples-docs/switch-cell.md

@@ -0,0 +1,81 @@
+## SwitchCell 开关单元格
+
+`SwitchCell`组件是对`Switch`和`Cell`组件的封装
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>
+
+### 使用指南
+``` javascript
+import { SwitchCell } from 'vant';
+
+Vue.component(SwitchCell.name, SwitchCell);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<template>
+ <van-cell-group>
+   <van-switch-cell v-model="checked" title="标题" />
+ </van-cell-group>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>
+```
+:::
+
+#### 禁用状态
+通过`disabled`属性可以将组件设置为禁用状态
+
+:::demo 禁用状态
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" :disabled="true" title="标题" />
+</van-cell-group>
+```
+:::
+
+#### 加载状态
+通过`loading`属性可以将组件设置为加载状态
+
+:::demo 加载状态
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" :loading="true" title="标题" />
+</van-cell-group>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值      |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 开关状态 | `Boolean`  |   | |
+| title | 左侧标题 |  `String` | `''` | |
+| loading | 是否为加载状态 |  `Boolean` | `false` | |
+| disabled | 是否为禁用状态 |  `Boolean` | `false` | |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| change | 开关状态切换回调 | checked: 是否选中开关 |

docs/src/doc.config.js

@@ -181,6 +181,15 @@ module.exports = {
                 "title": "Toast 轻提示"
               }
             ]
+          },
+          {
+            "groupName": "业务组件",
+            "list": [
+              {
+                "path": "/switch-cell",
+                "title": "SwitchCell 开关单元格"
+              }
+            ]
           }
         ]
       }

packages/index.js

@@ -31,6 +31,7 @@ import Steps from './steps';
 import Swipe from './swipe';
 import SwipeItem from './swipe-item';
 import Switch from './switch';
+import SwitchCell from './switch-cell';
 import Tab from './tab';
 import Tabs from './tabs';
 import Tag from './tag';
@@ -70,6 +71,7 @@ const components = [
   Swipe,
   SwipeItem,
   Switch,
+  SwitchCell,
   Tab,
   Tabs,
   Tag,
@@ -125,6 +127,7 @@ export {
   Swipe,
   SwipeItem,
   Switch,
+  SwitchCell,
   Tab,
   Tabs,
   Tag,

packages/switch-cell/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <van-cell :title="title" class="van-switch-cell">
+    <van-switch :value="value" @input="$emit('input', $event)" :disabled="disabled" :loading="loading" />
+  </van-cell>
+</template>
+
+<script>
+import Cell from '../cell';
+import Switch from '../switch';
+
+export default {
+  name: 'van-switch-cell',
+
+  components: {
+    [Cell.name]: Cell,
+    [Switch.name]: Switch
+  },
+
+  props: {
+    title: String,
+    value: Boolean,
+    loading: Boolean,
+    disabled: Boolean
+  },
+
+  watch: {
+    value() {
+      this.$emit('change', this.value);
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -31,3 +31,4 @@
 @import './uploader.css';
 @import './swipe.css';
 @import './notice-bar.css';
+@import './switch-cell.css';

packages/vant-css/src/switch-cell.css

@@ -0,0 +1,9 @@
+.van-switch-cell {
+  .van-cell__title {
+    vertical-align: middle;
+  }
+
+  .van-switch {
+    float: right;
+  }
+}

test/unit/specs/switch-cell.spec.js

@@ -0,0 +1,74 @@
+import SwitchCell from 'packages/switch-cell';
+import { mount } from 'avoriaz';
+import { DOMChecker } from '../utils';
+
+describe('SwitchCell', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('default', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-switch--off': 1,
+        '.van-switch--disabled': 0
+      }
+    });
+  });
+
+  it('set title', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true,
+      propsData: {
+        title: '测试标题'
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__text': '测试标题'
+      },
+      count: {
+        '.van-switch--off': 1,
+        '.van-switch--disabled': 0
+      }
+    });
+  });
+
+  it('checked', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true,
+      propsData: {
+        value: true
+      }
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-switch--on': 1,
+        '.van-switch--disabled': 0
+      }
+    });
+  });
+
+  it('disabled', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true,
+      propsData: {
+        disabled: true
+      }
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-switch--off': 1,
+        '.van-switch--disabled': 1
+      }
+    });
+  });
+});