mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Switch: tsx (#2784)
This commit is contained in:
parent
f211afe714
commit
e860759f16
@ -1,11 +1,24 @@
|
||||
import { use } from '../utils';
|
||||
import Loading from '../loading';
|
||||
import { switchProps } from './shared';
|
||||
import { switchProps, SharedSwitchProps } from './shared';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/use/sfc';
|
||||
|
||||
export type SwitchEvents = {
|
||||
onChange?(checked: boolean): void;
|
||||
};
|
||||
|
||||
const [sfc, bem] = use('switch');
|
||||
|
||||
function Switch(h, props, slots, ctx) {
|
||||
function Switch(
|
||||
h: CreateElement,
|
||||
props: SharedSwitchProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<SharedSwitchProps>
|
||||
) {
|
||||
const { value, loading, disabled, activeValue, inactiveValue } = props;
|
||||
|
||||
const style = {
|
||||
@ -13,7 +26,7 @@ function Switch(h, props, slots, ctx) {
|
||||
backgroundColor: value ? props.activeColor : props.inactiveColor
|
||||
};
|
||||
|
||||
const onClick = event => {
|
||||
const onClick = () => {
|
||||
if (!disabled && !loading) {
|
||||
const newValue = value === activeValue ? inactiveValue : activeValue;
|
||||
emit(ctx, 'input', newValue);
|
||||
@ -40,4 +53,4 @@ function Switch(h, props, slots, ctx) {
|
||||
|
||||
Switch.props = switchProps;
|
||||
|
||||
export default sfc(Switch);
|
||||
export default sfc<SharedSwitchProps, SwitchEvents>(Switch);
|
@ -2,18 +2,29 @@
|
||||
* Common Switch Props
|
||||
*/
|
||||
|
||||
export type SharedSwitchProps = {
|
||||
size?: string;
|
||||
value?: any;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
activeValue?: any;
|
||||
inactiveValue?: any;
|
||||
activeColor?: string;
|
||||
inactiveColor?: string;
|
||||
};
|
||||
|
||||
export const switchProps = {
|
||||
value: null,
|
||||
value: null as any,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
activeValue: {
|
||||
type: null,
|
||||
type: null as any,
|
||||
default: true
|
||||
},
|
||||
inactiveValue: {
|
||||
type: null,
|
||||
type: null as any,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
|
Loading…
x
Reference in New Issue
Block a user