mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 14:39:16 +08:00
[improvement] SwitchCell: jsx (#2656)
This commit is contained in:
neverland
GitHub
parent
1c70cf6ead
commit
9183849e6a
@ -41,10 +41,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
||||
<div class="van-cell__title"><span>设为默认收货地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div title="设为默认收货地址" class="van-switch" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -96,10 +96,8 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
||||
<div class="van-cell__title"><span>设为默认收货地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,12 +4,7 @@ import CheckboxMixin from '../mixins/checkbox';
|
||||
const [sfc, bem] = use('checkbox');
|
||||
|
||||
export default sfc({
|
||||
mixins: [
|
||||
CheckboxMixin({
|
||||
bem,
|
||||
parent: 'van-checkbox-group'
|
||||
})
|
||||
],
|
||||
mixins: [CheckboxMixin('van-checkbox-group', bem)],
|
||||
|
||||
computed: {
|
||||
checked: {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import Icon from '../icon';
|
||||
import findParent from './find-parent';
|
||||
|
||||
export default ({ parent, bem }) => ({
|
||||
export default (parent, bem) => ({
|
||||
mixins: [findParent],
|
||||
|
||||
props: {
|
||||
|
||||
25
packages/mixins/switch.js
Normal file
25
packages/mixins/switch.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Common Switch Props
|
||||
*/
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: null,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
activeValue: {
|
||||
type: null,
|
||||
default: true
|
||||
},
|
||||
inactiveValue: {
|
||||
type: null,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '30px'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -4,12 +4,7 @@ import CheckboxMixin from '../mixins/checkbox';
|
||||
const [sfc, bem] = use('radio');
|
||||
|
||||
export default sfc({
|
||||
mixins: [
|
||||
CheckboxMixin({
|
||||
bem,
|
||||
parent: 'van-radio-group'
|
||||
})
|
||||
],
|
||||
mixins: [CheckboxMixin('van-radio-group', bem)],
|
||||
|
||||
computed: {
|
||||
currentValue: {
|
||||
|
||||
38
packages/switch-cell/index.js
Normal file
38
packages/switch-cell/index.js
Normal file
@ -0,0 +1,38 @@
|
||||
import { use } from '../utils';
|
||||
import Cell from '../cell';
|
||||
import Switch from '../switch';
|
||||
import SwitchMixin from '../mixins/switch';
|
||||
|
||||
const [sfc, bem] = use('switch-cell');
|
||||
|
||||
export default sfc({
|
||||
mixins: [SwitchMixin],
|
||||
|
||||
props: {
|
||||
title: String,
|
||||
border: Boolean,
|
||||
size: {
|
||||
type: String,
|
||||
default: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.$emit('change', this.value);
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<Cell center title={this.title} border={this.border} class={bem()}>
|
||||
<Switch
|
||||
{...{ props: this.$props }}
|
||||
onInput={value => {
|
||||
this.$emit('input', value);
|
||||
}}
|
||||
/>
|
||||
</Cell>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<cell
|
||||
center
|
||||
:title="title"
|
||||
:border="border"
|
||||
:class="b()"
|
||||
>
|
||||
<van-switch
|
||||
v-bind="$props"
|
||||
@input="$emit('input', $event)"
|
||||
/>
|
||||
</cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VanSwitch from '../switch';
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'switch-cell',
|
||||
|
||||
components: {
|
||||
VanSwitch
|
||||
},
|
||||
|
||||
props: {
|
||||
value: null,
|
||||
title: String,
|
||||
border: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
activeValue: {
|
||||
type: null,
|
||||
default: true
|
||||
},
|
||||
inactiveValue: {
|
||||
type: null,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.$emit('change', this.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -7,10 +7,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
||||
<div class="van-cell__title"><span>标题</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -21,10 +19,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
||||
<div class="van-cell__title"><span>标题</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch van-switch--on van-switch--disabled" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +31,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
||||
<div class="van-cell__title"><span>标题</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,11 @@
|
||||
import { use } from '../utils';
|
||||
import Loading from '../loading';
|
||||
import SwitchMixin from '../mixins/switch';
|
||||
|
||||
const [sfc, bem] = use('switch');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
value: null,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
activeValue: {
|
||||
type: null,
|
||||
default: true
|
||||
},
|
||||
inactiveValue: {
|
||||
type: null,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '30px'
|
||||
}
|
||||
},
|
||||
mixins: [SwitchMixin],
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
|
||||
@ -4,16 +4,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -25,23 +21,17 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on" style="font-size:30px;background-color:#07c160;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user