ui-vue v1.2.1

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>

2，cButton 按钮组件

import { cButton } from 'ui-vue';

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

属性

事件

3，cButtonFooter 底部按钮组件

import { cButtonFooter } from 'ui-vue';

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

属性

事件

4，cCircle 水平进度条组件

import { cCircle } from 'ui-vue';

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

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

属性

事件

6，cHeaderBack 顶部导航组件

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

属性

事件

7，cInput 输入框组件

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

属性

事件

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

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

属性

事件

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>

属性

事件

10，cLoading loading组件

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

属性

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>

属性

事件

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>

事件

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>

属性

事件

18，cTimeCount 普通倒计时组件

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

属性

19，提示框组件

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

属性