ui-vue

v1.2.1

Published

2 years ago

ui-vue 前端ui框架

Downloads

0High
0Medium
0Low

cpagelib

ui-vue ui Cpage.js js mvvm vue css ui vue2 ui

cate-design 前端 UI 框架

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

安装

npm install --save ui-vue

然后全局引入css
import 'ui-vue/dist/index.css';

可以全局注入组件
import * as uiVue from 'ui-vue';
Object.keys(uiVue).forEach(key=>{
  Vue.use(uiVue[key]);
});

1，cBar 水平进度条组件

import { cBar } from 'ui-vue';

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

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

2，cButton 按钮组件

import { cButton } from 'ui-vue';

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

属性

事件

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

3，cButtonFooter 底部按钮组件

import { cButtonFooter } from 'ui-vue';

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

属性

事件

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

4，cCircle 水平进度条组件

import { cCircle } from 'ui-vue';

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

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

5，cConfirm 确认框组件

import { cConfirm } from 'ui-vue';

 <confirm ref="myConfirm" confirm-text="提交" @confirm="confirmFn()">
    <div slot="inner">
        inner test
    </div>
</confirm>

this.$refs.myConfirm.show();
this.$refs.myConfirm.hide();

属性

| 属性 | 类型 | 作用 | | :------ | :------ | :------ | | 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 'ui-vue';
<c-header-back title="详情页" @onBack="backFn"></c-header-back>

属性

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

事件

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

7，cInput 输入框组件

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

属性

事件

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

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

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

属性

事件

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

9，cItem 列表组件

import { cItem } from 'ui-vue';
<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 'ui-vue';
<c-loading color="#f60"></c-loading>

属性

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

11，cScrollAble 页面scroll组件

import { cScrollAble } from 'ui-vue';
 <c-scroll-able @pullUp="pullUpFn" @pullDown="pullDownFn" ref="scrollList" :data="data" :bottom-tip-show="bottomTipShow">
    <div>xxx</div>
</c-scroll-able>

属性

事件

| 事件 | 作用 | | :------ | :------ | | pullUp | 上拉时候事件响应 | | pullDown | 下拉时候事件响应 |

12，cScrollX 左右滑动组件

import { cScrollX } from 'ui-vue';

<c-scroll-x>
  <div class="item">
    xxx
  </div>
</c-scroll-x>

13，cSlide 抽屉组件

import { cSlide } from 'ui-vue';
<slide ref="mySlider">
    内容
</slide>

事件

| 事件 | 作用 | | :------ | :------ | | show | 打开侧滑，this.$refs.mySlider.show() | | hide | 关闭侧滑，this.$refs.mySlider.hide() |

14，cSwiper 图片切换组件

import { cSwiper } from 'ui-vue';
<c-swiper :img-list="imgList" page-style="dot" page-pos="center" height="3rem"></c-swiper>

属性

15，cSwitch 开关组件

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

属性

16，cTabs tab切换组件

import { tabs, tabItem } from 'ui-vue';
<tabs @onClick="tabClick" :active-index="activeIndex" active-color="#f60" icon-width="0.4rem">
    <tab-item 
        title="转让中" 
        top-icon="login_password_visible.png" 
        active-top-icon="login_password_invisible.png"
    >
        转让中
    </tab-item>
    <tab-item 
        title="可转让"
        top-icon="login_password_visible.png" 
        active-top-icon="login_password_invisible.png"
    >
        可转让
    </tab-item>
</tabs>

tabs组件属性

tab-item 组件属性

17，cTimeCircle 圆环倒计时组件

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

属性

| 属性 | 类型 | 作用 | | :------ | :------ | :------ | | timer | 类型Number | 默认60 倒计时时间 |

事件

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

18，cTimeCount 普通倒计时组件

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

属性

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

19，提示框组件

需要全局引入可用
this.$toast({
    text: 'loading'
})

属性

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

cate-design 前端 UI 框架

安装

1，cBar 水平进度条组件

2，cButton 按钮组件

属性

事件

3，cButtonFooter 底部按钮组件

属性

事件

4，cCircle 水平进度条组件

5，cConfirm 确认框组件

属性

事件

6，cHeaderBack 顶部导航组件

属性

事件

7，cInput 输入框组件

属性

事件

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

属性

事件

9，cItem 列表组件

属性

事件

10，cLoading loading组件

属性

11，cScrollAble 页面scroll组件

属性

事件

12，cScrollX 左右滑动组件

13，cSlide 抽屉组件

事件

14，cSwiper 图片切换组件

属性

15，cSwitch 开关组件

属性

16，cTabs tab切换组件

tabs组件属性

tab-item 组件属性

17，cTimeCircle 圆环倒计时组件

属性

事件

18，cTimeCount 普通倒计时组件

属性

19，提示框组件

属性