Boyyang-ui NPM

boyyang-ui

安装

yarn add boyyang-ui

npm install boyyang-ui

使用

main.ts 引入

import { boyyangui } from 'boyyang-ui'

const bootstrap = async () => {
    const app = createApp(App)
    
    app.use(boyyangui)

    app.mount('#app')
}

void bootstrap()

组件

button 组件（button）

<template>
    <y-button></y-button>
</template>

interface IBtnProps {
    text?: string; 
    width?: number; 
    height?: number;
    bgColor?: string;
    borderRaduis?: number;
    fontSize?: number;
    fontColor?: string;
    fontWeight?: string | number;
    isDisable?: boolean
}

interface IBtnEmits {
    (e: 'btnClick'): void
}

ColorSelector (颜色选择器)

<template>
    <y-color-selector></y-color-selector>
</template>

interface IColorSelectorProps {
    colors?: string[]; //默认颜色集合
    selectedColor?: string; //默认选中颜色
}

interface IColorSelectorEmits {
    (e: 'colorChange', color: string): void;
}

Switch (switch开关)

<template>
    <y-switch></y-switch>
</template>

interface ISwitchProps {
    status: boolean;
    width?: number;
    trueLabel?: string | number;
    falseLabel?: string | number;
    trueLabelColor?: string;
    falseLabelColor?: string;
    isDisable?: boolean;
}

GlassCard (毛玻璃卡片)

<template>
     <y-glass-card> </y-glass-card>
</template>

interface IGlassCardProps {
    width?: string; // width: 默认250px 可以设置为百分比
    height?: string; // height: 默认350px 可以设置为百分比
    borderRadius?: number; // border-radius 圆角 默认5px
    blur?: number; // glass opcity 玻璃透明度 默认为10px
    boxShadow?: string; // box-shandow 默认 3px 5px 2px 2px rgba(0, 0, 0, 0.1)
}