39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { View } from "@tarojs/components"
|
|
import classnames from "classnames";
|
|
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
|
|
import styles from "./index.module.scss"
|
|
|
|
type params = {
|
|
onSelect?: () => void, //选择触发
|
|
onClose?: () => void, //取消触发
|
|
status?: false|true //是否选中
|
|
disabled?: false|true //是否禁用
|
|
}
|
|
export default forwardRef(({onSelect, onClose, status = false, disabled = false}: params, ref) => {
|
|
const [selected, SetSelected] = useState(false)
|
|
const onSelectEven = () => {
|
|
if(disabled) return false
|
|
let res = !selected
|
|
if(res) {
|
|
onSelect?.()
|
|
} else {
|
|
onClose?.()
|
|
}
|
|
SetSelected(res)
|
|
}
|
|
useImperativeHandle(ref, () => ({
|
|
onSelectEven
|
|
}))
|
|
useEffect(() => {
|
|
SetSelected(status)
|
|
}, [status])
|
|
return (
|
|
<>
|
|
<View className={styles.checkbox_main} onClick={() => onSelectEven()}>
|
|
<View className={classnames(styles.checkbox_item, disabled&&styles.no_checkbox_item, selected&&styles.checkbox_item_select)}>
|
|
{selected&&<View className={classnames('iconfont', 'icon-tick', styles.miconfont)}></View>}
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
}) |