diff --git a/docs/demos/views/address-edit.vue b/docs/demos/views/address-edit.vue index f350c0176..97774dfec 100644 --- a/docs/demos/views/address-edit.vue +++ b/docs/demos/views/address-edit.vue @@ -26,7 +26,7 @@ export default { name: '黄龙万科中心', address: '杭州市西湖区' }, { - name: '黄龙万科中心H座' + name: '黄龙万科中心G座' }, { name: '黄龙万科中心H座', address: '杭州市西湖区' @@ -34,12 +34,12 @@ export default { }, 'en-US': { searchResult: [{ - name: 'Name', + name: 'Name1', address: 'Address' }, { - name: 'Name' + name: 'Name2' }, { - name: 'Name', + name: 'Name3', address: 'Address' }] } diff --git a/docs/demos/views/switch.vue b/docs/demos/views/switch.vue index 92df8d9e9..87515b079 100644 --- a/docs/demos/views/switch.vue +++ b/docs/demos/views/switch.vue @@ -13,7 +13,7 @@ - + diff --git a/docs/markdown/en-US/switch.md b/docs/markdown/en-US/switch.md index 80589bf0b..9dc759142 100644 --- a/docs/markdown/en-US/switch.md +++ b/docs/markdown/en-US/switch.md @@ -41,7 +41,7 @@ export default { #### Advanced usage ```html - + ``` ```js @@ -71,7 +71,8 @@ export default { |-----------|-----------|-----------|-------------|-------------| | v-model | Check status of Switch | `Boolean` | `false` | - | | loading | Whether to show loading icon | `Boolean` | `false` | - | -| disabled | Disable switch | `Boolean` | `false` | - | +| disabled | Whether to disable switch | `Boolean` | `false` | - | +| size | Size of switch | `String` | `30px` | - | ### Event diff --git a/docs/markdown/zh-CN/switch.md b/docs/markdown/zh-CN/switch.md index a90c22fbc..8693c0d3b 100644 --- a/docs/markdown/zh-CN/switch.md +++ b/docs/markdown/zh-CN/switch.md @@ -36,7 +36,7 @@ export default { #### 高级用法 ```html - + ``` ```js @@ -68,6 +68,7 @@ export default { | v-model | 开关选中状态 | `Boolean` | `false` | - | | loading | 是否为加载状态 | `Boolean` | `false` | - | | disabled | 是否为禁用状态 | `Boolean` | `false` | - | +| size | 开关尺寸 | `String` | `30px` | - | ### Event diff --git a/packages/field/index.vue b/packages/field/index.vue index 407a38441..84bd3f55d 100644 --- a/packages/field/index.vue +++ b/packages/field/index.vue @@ -127,6 +127,10 @@ export default create({ } const el = this.$refs.textarea; + if (!el) { + return; + } + el.style.height = 'auto'; let height = el.scrollHeight; diff --git a/packages/switch/index.vue b/packages/switch/index.vue index 19a1fabf5..b58fdc7a8 100644 --- a/packages/switch/index.vue +++ b/packages/switch/index.vue @@ -1,9 +1,16 @@ @@ -16,11 +23,23 @@ export default create({ props: { value: Boolean, loading: Boolean, - disabled: Boolean + disabled: Boolean, + size: { + type: String, + default: '30px' + } + }, + + computed: { + style() { + return { + fontSize: this.size + }; + } }, methods: { - toggleState() { + onClick() { if (!this.disabled && !this.loading) { this.$emit('input', !this.value); this.$emit('change', !this.value); diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css index a1341b945..bc75c88aa 100644 --- a/packages/vant-css/src/switch.css +++ b/packages/vant-css/src/switch.css @@ -1,59 +1,44 @@ @import './common/var.css'; .van-switch { - height: 33px; - width: 53px; + height: 1em; + width: 1.6em; display: inline-block; position: relative; background: $white; border-radius: 16px; - box-sizing: border-box; + box-sizing: content-box; border: 1px solid rgba(0, 0, 0, .1); - border-radius: 32px; + border-radius: 1em; &__node { - width: 30px; - height: 30px; - border-radius: 13.5px; - background-color: $white; - position: absolute; - box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); - left: 0; top: 0; - z-index: 2; - transition: transform .3s; - - &::after { - border-color: rgba(0, 0, 0, .1); - border-radius: 27px; - } + left: 0; + z-index: 1; + width: 1em; + height: 1em; + transition: .3s; + position: absolute; + border-radius: 100%; + background-color: $white; + box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); } &__loading { - top: 50%; - left: 50%; - width: 16px; - height: 16px; - transform: translate3d(-50%, -50%, 0); + top: 25%; + left: 25%; + width: 50%; + height: 50%; } &--on { background-color: #44db5e; - &::after { - border-color: #44db5e; - } - .van-switch__node { - transform: translateX(21px); + transform: translateX(.6em); } } - &--off { - background-color: $white; - border-color: rgba(0, 0, 0, .1); - } - &--disabled { opacity: .4; } diff --git a/test/specs/switch-cell.spec.js b/test/specs/switch-cell.spec.js index edfaee56a..cffb11826 100644 --- a/test/specs/switch-cell.spec.js +++ b/test/specs/switch-cell.spec.js @@ -15,7 +15,7 @@ describe('SwitchCell', () => { DOMChecker(wrapper, { count: { - '.van-switch--off': 1, + '.van-switch--on': 0, '.van-switch--disabled': 0 } }); @@ -34,7 +34,7 @@ describe('SwitchCell', () => { '.van-cell__text': '测试标题' }, count: { - '.van-switch--off': 1, + '.van-switch--on': 0, '.van-switch--disabled': 0 } }); @@ -66,7 +66,7 @@ describe('SwitchCell', () => { DOMChecker(wrapper, { count: { - '.van-switch--off': 1, + '.van-switch--on': 0, '.van-switch--disabled': 1 } }); diff --git a/test/specs/switch.spec.js b/test/specs/switch.spec.js index 44ee52edb..e8bf85af4 100644 --- a/test/specs/switch.spec.js +++ b/test/specs/switch.spec.js @@ -20,17 +20,6 @@ describe('Switch', () => { expect(wrapper.hasClass('van-switch--on')).to.be.true; }); - it('create off switch', () => { - wrapper = mount(Switch, { - propsData: { - value: false - } - }); - - expect(wrapper.hasClass('van-switch')).to.be.true; - expect(wrapper.hasClass('van-switch--off')).to.be.true; - }); - it('create loading switch', () => { wrapper = mount(Switch, { propsData: { @@ -75,9 +64,9 @@ describe('Switch', () => { } }); - expect(wrapper.hasClass('van-switch--off')).to.be.true; + expect(wrapper.hasClass('van-switch--on')).to.be.false; wrapper.trigger('click'); - expect(wrapper.hasClass('van-switch--off')).to.be.true; + expect(wrapper.hasClass('van-switch--on')).to.be.false; }); it('click should toggle the switch', () => { @@ -91,7 +80,7 @@ describe('Switch', () => { wrapper.vm.value = val; }); - expect(wrapper.hasClass('van-switch--off')).to.be.true; + expect(wrapper.hasClass('van-switch--on')).to.be.false; wrapper.trigger('click'); expect(wrapper.hasClass('van-switch--on')).to.be.true; });