Taro 封装箭头组件

参数	说明	类型	默认值	必填
color	箭头的颜色	string	#000000	否
lineWidth	箭头线的宽度	number	2	否
breadth	箭头的大小	number	5	否
unfold	是否展开（多用于下拉框）	boolean	false	否
fixedAngle	固定角度（优先级大于unfold）	number	-	否
onClick	点击后的回调函数	(e: ITouchEvent) => void	-	否

import { ITouchEvent, View } from "@tarojs/components"

export interface HArrowProps {
    color?: string,
    lineWidth?: number, // 线的宽度
    breadth?: number, // 箭头的大小
    unfold?: boolean,
    fixedAngle?: number,
    onClick?: (e: ITouchEvent) => void
}

const HArrow = (props: HArrowProps) => {
    const {
        color = '#000000',
        lineWidth = 2,
        breadth = 5,
        unfold = false,
        fixedAngle,
        onClick
    } = props

    return (
        <View
            style={{
                width: `${breadth}px`,
                height: `${breadth}px`,
                borderTop: `${lineWidth}px ${color} solid`,
                borderRight: `${lineWidth}px ${color} solid`,
                transform: `rotate(${fixedAngle || (unfold ? -45 : 135)}deg)`,
                transition: 'all 1s ease-out'
            }}
            onClick={(e: ITouchEvent) => onClick && onClick(e)}
        >
        </View>
    )
}