cate-design

v2.2.31

Published

a year ago

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

0High
0Medium
0Low

cpagelib

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"/>

属性

事件

| 事件 | 作用 | | :------ | :--------------- | | onClick | 返回按钮点击事件 |

3，cButtonFooter 底部悬浮按钮组件

import { cButtonFooter } from 'cate-design';

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

属性

事件

| 事件 | 作用 | | :------ | :--------------- | | 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>

属性

事件

| 事件 | 作用 | | :------ | :--------------------------------- | | 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>

属性

事件

| 事件 | 作用 | | :------ | :--------------------------------- | | 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>

属性

事件

| 事件 | 作用 | | :------ | :------- | | 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>;

属性

事件

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

12，cSwitch 开关组件

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

属性

事件

| 事件 | 作用 | | :------- | :----------- | | 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 组件属性

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" | "vertical" |

事件

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

17，tree 树形组件

18，提示框组件

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

属性