index.tsx
TypeScript
import { FC, memo, PropsWithChildren } from 'react'
import { View, Switch } from '@tarojs/components'
import classNames from 'classnames'
import styles from './index.module.less'
import { AccurateEmsState } from '../../const'
interface EmsProps {
/** ems 开 | 关 */
value: AccurateEmsState
onChange: (value: AccurateEmsState) => void
}
/**
* Ems
* @param props
* @returns
*/
const Component: FC<PropsWithChildren<EmsProps>> = ({ value, onChange }) => {
const getChecked = () => value === AccurateEmsState.On
return (
<View>
<View className={classNames(styles.ems)} >
<View className={styles.emsText}>{`EMS${getChecked() ? '打开' : '关闭'}`}</View>
<Switch
checked={getChecked()}
onChange={(event) => {
onChange(event.detail.value ? AccurateEmsState.On : AccurateEmsState.Off)
}}
color='#39BFAD'
className={classNames(styles.customSwitch, {
[styles.customSwitchOff]: !getChecked()
})}
/>
</View>
</View>
)
}
const Ems = memo(Component)
export default Ems
index.less
css
.ems {
display: flex;
flex-direction: column;
.emsText {
font-size: 12px;
min-width: 50px;
width: auto;
}
.customSwitch {
:global {
.wx-switch-input {
height: 14px;
width: 34px;
background-color: #393B3B;
border-color: #393B3B;
}
/* false的样式 */
.wx-switch-input::before {
height: 12px;
width: 12px;
background-color: #39BFAD;
}
/* true的样式 */
.wx-switch-input::after {
height: 12px;
width: 12px;
}
}
}
.customSwitchOff {
:global {
/* true的样式 */
.wx-switch-input::after {
height: 12px;
width: 12px;
background-color: #808080;
}
}
}
}
效果: