mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Switch: support custom size (#723)
This commit is contained in:
neverland
GitHub
parent
1489efd9f9
commit
c6a3896ce7
@ -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'
|
||||
}]
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-switch :value="checked2" @input="onInput" />
|
||||
<van-switch :value="checked2" size="36px" @input="onInput" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -41,7 +41,7 @@ export default {
|
||||
#### Advanced usage
|
||||
|
||||
```html
|
||||
<van-switch :value="checked" @input="onInput" />
|
||||
<van-switch :value="checked" size="36px" @input="onInput" />
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
|
||||
#### 高级用法
|
||||
```html
|
||||
<van-switch :value="checked" @input="onInput" />
|
||||
<van-switch :value="checked" size="36px" @input="onInput" />
|
||||
```
|
||||
|
||||
```js
|
||||
@ -68,6 +68,7 @@ export default {
|
||||
| v-model | 开关选中状态 | `Boolean` | `false` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| size | 开关尺寸 | `String` | `30px` | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -127,6 +127,10 @@ export default create({
|
||||
}
|
||||
|
||||
const el = this.$refs.textarea;
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
el.style.height = 'auto';
|
||||
|
||||
let height = el.scrollHeight;
|
||||
|
||||
@ -1,9 +1,16 @@
|
||||
<template>
|
||||
<div class="van-switch" :class="[`van-switch--${value ? 'on' : 'off'}`, { 'van-switch--disabled': disabled }]" @click="toggleState">
|
||||
<div class="van-switch__node van-hairline-surround">
|
||||
<div
|
||||
class="van-switch"
|
||||
:class="[{
|
||||
'van-switch--on': value,
|
||||
'van-switch--disabled': disabled
|
||||
}]"
|
||||
:style="style"
|
||||
@click="onClick"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
<loading v-if="loading" class="van-switch__loading" />
|
||||
</div>
|
||||
<div class="van-switch__bg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
});
|
||||
|
||||
@ -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;
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user