cate-design v2.2.31

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>;

2，cButton 按钮组件

import { cButton } from 'cate-design';

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

属性

事件

3，cButtonFooter 底部悬浮按钮组件

import { cButtonFooter } from 'cate-design';

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

属性

事件

4，cCircle 圆环进度条组件

import { cCircle } from "cate-design";

<c-circle percent="100"></c-circle>;

5，cConfirm 确认框组件

import { cConfirm } from 'cate-design';

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

属性

事件

6，cHeaderBack 顶部导航组件

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

属性

事件

7，cInput 输入框组件

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

属性

事件

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

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

属性

事件

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>

属性

事件

10，cLoading loading 组件

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

属性

11，cDrawer 抽屉组件

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

属性

事件

12，cSwitch 开关组件

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

属性

事件

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 组件属性

14，cTimeCircle 圆环倒计时组件

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

属性

事件

15，cTimeCount 普通倒计时组件

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

属性

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>

属性

事件

17，tree 树形组件

18，提示框组件

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

属性