diff --git a/docs/examples-docs/switch-cell.md b/docs/examples-docs/switch-cell.md
new file mode 100644
index 000000000..24ff57fc8
--- /dev/null
+++ b/docs/examples-docs/switch-cell.md
@@ -0,0 +1,81 @@
+## SwitchCell 开关单元格
+
+`SwitchCell`组件是对`Switch`和`Cell`组件的封装
+
+
+
+### 使用指南
+``` javascript
+import { SwitchCell } from 'vant';
+
+Vue.component(SwitchCell.name, SwitchCell);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+
+
+
+
+
+
+
+```
+:::
+
+#### 禁用状态
+通过`disabled`属性可以将组件设置为禁用状态
+
+:::demo 禁用状态
+```html
+
+
+
+```
+:::
+
+#### 加载状态
+通过`loading`属性可以将组件设置为加载状态
+
+:::demo 加载状态
+```html
+
+
+
+```
+:::
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 开关状态 | `Boolean` | | |
+| title | 左侧标题 | `String` | `''` | |
+| loading | 是否为加载状态 | `Boolean` | `false` | |
+| disabled | 是否为禁用状态 | `Boolean` | `false` | |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| change | 开关状态切换回调 | checked: 是否选中开关 |
\ No newline at end of file
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 0e3afd423..58c899777 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -181,6 +181,15 @@ module.exports = {
"title": "Toast 轻提示"
}
]
+ },
+ {
+ "groupName": "业务组件",
+ "list": [
+ {
+ "path": "/switch-cell",
+ "title": "SwitchCell 开关单元格"
+ }
+ ]
}
]
}
diff --git a/packages/index.js b/packages/index.js
index e1ff78211..fcb708c38 100644
--- a/packages/index.js
+++ b/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,
diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue
new file mode 100644
index 000000000..911d33da5
--- /dev/null
+++ b/packages/switch-cell/index.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 6a7bfa8df..d897aacbd 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -31,3 +31,4 @@
@import './uploader.css';
@import './swipe.css';
@import './notice-bar.css';
+@import './switch-cell.css';
diff --git a/packages/vant-css/src/switch-cell.css b/packages/vant-css/src/switch-cell.css
new file mode 100644
index 000000000..7edabe8bd
--- /dev/null
+++ b/packages/vant-css/src/switch-cell.css
@@ -0,0 +1,9 @@
+.van-switch-cell {
+ .van-cell__title {
+ vertical-align: middle;
+ }
+
+ .van-switch {
+ float: right;
+ }
+}
\ No newline at end of file
diff --git a/test/unit/specs/switch-cell.spec.js b/test/unit/specs/switch-cell.spec.js
new file mode 100644
index 000000000..a363c5ced
--- /dev/null
+++ b/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
+ }
+ });
+ });
+});