cate-design 一个基于 Vue3+TypeScript 的前端UI框架，简单易用

cate-design 一个基于 Vue3+TypeScript 的前端UI框架，简单易用，适合一般的H5项目。组件不断完善中

文档地址：https://cpagejs.github.io/ui-vue3/

备注：1.x版本是基于 Vue2.x 开发，2.x版本是基于 vue3+ts 开发

安装

npm install --save cate-design

注册

import { createApp } from 'vue';
// 然后全局引入css
import 'cate-design/dist/index.css';

// 可以全局注入组件
import cateDesign from 'cate-design';

const app = createApp(App);
app.use(cateDesign);
app.mount('#app');

1，cBar 水平进度条组件

import { cBar } from 'cate-design';

<c-bar percent='20' color="#f60"></c-bar>

属性	类型	作用
percent	类型String 默认''	进度条的百分比
color	类型String 默认'#FF6E4E'	进度条的颜色

2，cButton 按钮组件

import { cButton } from 'cate-design';

<c-button text="btn text" type="primary" text-color="#fff" size="lg" @on-click="btnClick"/>

属性

属性	类型	作用
text	类型String 默认''	按钮文字
backgroundColor	类型String	自定义按钮颜色
textColor	类型String	自定义文字颜色
disabled	类型Boolean 默认false	按钮是否允许点击
type	default/primary/danger/link，默认default	按钮类型
size	sm/lg 默认sm	按钮大小

事件

事件	作用
onClick	返回按钮点击事件

3，cButtonFooter 底部悬浮按钮组件

import { cButtonFooter } from 'cate-design';

<c-button-footer text="点击" @onClick="buttonClick"></c-button-footer>

属性

属性	类型	作用
text	类型String 默认''	按钮文字
backgroundColor	类型String	自定义按钮颜色
textColor	类型String	自定义文字颜色
disabled	类型Boolean 默认false	按钮是否允许点击

事件

事件	作用
onClick	返回按钮点击事件

4，cCircle 圆环进度条组件

import { cCircle } from 'cate-design';

<c-circle percent='100'></c-circle>

属性	类型	作用
percent	类型String 默认''	进度条的百分比

5，cConfirm 确认框组件

import { cConfirm } from 'cate-design';

 <confirm isShow="true" confirm-text="提交" @confirm="confirmFn()">
    <template #inner>
        inner test
    </template>
</confirm>

属性

属性	类型	作用
isShow	类型Boolean 默认true	是否显示弹窗
type	类型Number 默认1	弹窗显示类型--1：普通确认框; 2：支持顶部背景图，按钮组有空隙; 3：弹窗里面没有内容，自由发挥
showBtn	类型Boolean 默认true	是否显示默认按钮
showCancelBtn	类型Boolean 默认true	是否显示取消按钮
confirmText	类型String 默认‘确定’	确认按钮名称
cancelText	类型String 默认‘取消’	取消按钮名称
cancelBtnStyle	类型Object 默认{}	取消按钮样式 例：{'marginTop':'10px'}
confirmBtnStyle	类型Object 默认{}	确认按钮样式 例：{'marginTop':'10px'}
innerStyle	类型Object 默认{}	确认按钮样式 例：{'marginTop':'10px'}
showBg	类型Boolean 默认true	是否显示弹窗遮罩层
bgColor	类型String 默认‘rgba(0,0,0,0.4)’	弹窗遮罩层颜色

事件

事件	作用
confirm	确认按钮点击事件
cancel	取消按钮点击事件

6，cHeaderBack 顶部导航组件

import { cHeaderBack } from 'cate-design';
<c-header-back title="详情页" @onBack="backFn"></c-header-back>

属性

属性	类型	作用
title	类型String 默认''	导航标题

事件

事件	作用
onBack	返回按钮点击事件

7，cInput 输入框组件

import { cInput } from 'cate-design';
<c-input ref="input1"  @onInput="inputFn" @onBlur="blurFn"></c-input>

属性

属性	类型	作用
placeholder	类型String 默认'请输入'	placeholder值
value	类型String 默认''	输入框默认值
label	类型String 默认''	label值
length	类型Number 默认200	最多可输入的字符长度
disabled	类型Boolean 默认false	是否禁止输入

事件

事件	作用
onInput	input输入时候的事件，返回值value
onBlur	input失去焦点的事件，返回值value

8，cInputPassword 密码输入框组件（可显示密码）

import { cInputPassword } from 'cate-design';
<c-input-password ref="input1"  @onInput="inputFn" @onBlur="blurFn"></c-input-password>

属性

属性	类型	作用
placeholder	类型String 默认'请输入'	placeholder值
value	类型String 默认''	输入框默认值
label	类型String 默认''	label值
length	类型Number 默认20	最多可输入的字符长度
disabled	类型Boolean 默认false	是否禁止输入
showToggle	类型Boolean 默认true	是否显示右侧切换图标

事件

事件	作用
onInput	input输入时候的事件，返回值value
onBlur	input失去焦点的事件，返回值value

9，cItem 列表组件

import { cItem } from 'cate-design';
<c-item :has-left-icon="hasIcon" left-icon="leftIcon.png" left-text="测试" right-text="10" @onClick="handelC()"></c-item>

属性

属性	类型	作用
avatar	类型String 默认''	左侧图标
title	类型String 默认''	左侧文案
description	类型String 默认''	列表元素的描述内容
rightText	类型String 默认''	右侧文案
rightArrowShow	类型Boolean 默认true	右侧是否显示箭头图标

事件

事件	作用
onClick	点击事件

10，cLoading loading组件

import { cLoading } from 'cate-design';
<c-loading color="#f60"></c-loading>

属性

属性	类型	作用
color	类型String 默认'#6284e2'	loading颜色
styleLoading	类型Object 默认{}	自定义样式

11，cDrawer 抽屉组件

import { cDrawer } from 'cate-design';
<c-drawer>
    内容
</c-drawer>

属性

属性	类型	作用
isShow	类型Boolean 默认false	是否显示Drawer
showMask	类型Boolean 默认true	是否显示遮罩层
position	类型String 默认left	抽屉的位置，左边还是右边，默认左边left

事件

事件	作用
onMaskClick	背景区域被点击后触发

12，cSwitch 开关组件

import { cSwitch } from 'cate-design';
<c-switch ref="mySwitch" :checked="checked"></c-switch>

属性

属性	类型	作用
color	类型String	默认'#a0a0a0' 未选中时候颜色
activeColor	类型String	默认'#448ff2' 选中时候颜色
checked	类型Boolean	默认false 是否选中
disabled	类型Boolean	默认false 是否可以选择

事件

事件	作用
onSwitch	被点击后触发

13，cTabs tab切换组件

import { cTabs, cTabPane } from 'cate-design';

<c-tabs v-model="currentTabName" v-bind="args">
    <c-tab-pane name="React">
    <template #title>
        <b style="color: red">TabOne</b>
    </template>
    content1
    </c-tab-pane>
    <c-tab-pane name="Vue">content2</c-tab-pane>
    <c-tab-pane name="Cpage">content3</c-tab-pane>
</c-tabs>

tabs组件属性

属性	类型	作用
activeIndex	类型Number 默认0	默认选中的tab
normalColor	类型String 默认'#333'	选项卡默认字体和下划线颜色
activeColor	类型String 默认'#448FF2'	选项卡选中时候字体和下划线颜色
showBorderRight	类型Boolean 默认false	是否显示右侧线条，border-right
showBottomLine	类型Boolean 默认true	是否显示底部下划线
iconWidth	类型String 默认'40px'	icon图标宽度
iconWidth	类型String 默认'40px'	icon图标高度
position	类型String 默认'normal'	tab位置，normal在文档流里，top最顶部，bottom最底部

tab-item 组件属性

属性	类型	作用
name	类型String	默认'' tab标题，可以是字符串

14，cTimeCircle 圆环倒计时组件

import { cTimeCircle } from 'cate-design';
<c-time-circle :timer="timer"></c-time-circle>

属性

属性	类型	作用
timer	类型Number	默认60 倒计时时间
showNum	类型Boolean	是否展示倒计时数字，默认true

事件

事件	作用
timeCircle	倒计时结束时候派发的事件，使用时候先引入event

15，cTimeCount 普通倒计时组件

import { cTimeCount } from 'cate-design';
<c-time-count :date="date"></c-time-count>

属性

属性	类型	作用
date	类型String 默认''	日期格式

16，menu菜单框组件

<c-menu defaultIndex="0" mode="vertical" :onSelect="handleClick">
    <c-menu-item>link1</c-menu-item>
    <c-sub-menu title="下拉">
        <c-menu-item>link2-1</c-menu-item>
    </c-sub-menu>
    <c-menu-item>link3</c-menu-item>
</c-menu>

属性

属性	类型	作用
defaultIndex	类型String 默认'0'	默认选中的菜单
mode	类型String 默认'0'	水平或者垂直, "horizontal"

事件

事件	作用
onSelect	菜单被点击时候调用

17，tree树形组件

18，提示框组件

// import { useToast } from "cate-design";
useToast({
    msg: 'loading'
})

属性

属性	类型	作用
msg	类型String	默认'loading' 提示文案
shape	类型String	默认'square' 提示框形状，'square'正方形，'rect'长方形
type	类型String	默认'tip' 提示框icon显示类型，'tip'：没有icon，'success'：成功, 'error'：失败，'loading'：loading
delay	类型Number	默认1500 提示框显示时间，单位ms
showMask	类型Boolean	默认false 是否显示遮罩层
position	类型String	默认'center' 提示框显示位置，'center'：居中，'top'：顶部，'bottom'：底部