Taro 封装箭头组件

最新推荐文章于 2024-05-13 10:52:32 发布

TA_WORLD

最新推荐文章于 2024-05-13 10:52:32 发布

阅读量274

点赞数 1

CC 4.0 BY-SA版权

分类专栏：组件封装 Taro 文章标签： taro 组件 react 箭头

本文链接：https://blog.youkuaiyun.com/qq_56303170/article/details/127697951

Taro 同时被 2 个专栏收录

7 篇文章

订阅专栏

组件封装

5 篇文章

订阅专栏

Taro 封装箭头组件

参数	说明	类型	默认值	必填
color	箭头的颜色	string	#000000	否
lineWidth	箭头线的宽度	number	2	否
breadth	箭头的大小	number	5	否
unfold	是否展开（多用于下拉框）	boolean	false	否
fixedAngle	固定角度（优先级大于unfold）	number	-	否

import { View } from "@tarojs/components"

interface HArrowProps {
    color?:string,
    lineWidth?:number, // 线的宽度
    breadth?:number, // 箭头的大小
    unfold?:boolean,
    fixedAngle?:number,
}

const HArrow = (props:HArrowProps) => {
    const {
        color = '#000000',
        lineWidth = 2,
        breadth = 5,
        unfold = false,
        fixedAngle
    } =  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'
        }}>
        </View>
    )
}

export default HArrow