ColorUI 开发文档ColorUI 开发文档
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
  • 组件

    • 引用组件
    • 主题 ui-change-theme
    • 导航栏 ui-navbar
    • 头像 ui-avatar
    • 标题 ui-title
    • 标签 ui-tag
    • 按钮 ui-btn
    • 图片 ui-img
    • 代码 ui-code
    • 进度条 ui-progress
    • 加载 ui-loading
    • 菜单 ui-menu
    • 浮动 ui-fixed
    • 卡片 ui-card
    • 栅栏 ui-grid
    • 气泡框 ui-popover
    • 模态框 ui-modal
    • 轻提示 $tips
    • 选项卡 ui-tab
    • 轮播图 ui-swiper
    • 步骤条 ui-steps
    • 输入框 ui-input
    • 单选框 ui-radio
    • 复选框 ui-checkbox
    • 开关 ui-switch

轻提示 $tips

sys组件内置了,一般不需要再次挂载该组件。

Tips

mp-cu

//普通,默认1500毫秒关闭
this.$tips('你好呀');
//倒计时关闭
this.$tips({
    title :'您好呀!',
    duration : 5000
});
//多内容
this.$tips({
    title : 'Android Studio1.4 \r\n以后官方重做了新建Activity的模板展现, 其中默认的那一个, 就很好的演示了新系统的一些交互逻辑, 点击FAB的时候, 会从底部滑出来一个SnackBar, 其中默认的那一个, 就很好的演示了新系统的一些交互逻辑, 点击FAB的时候, 会从底部滑出来一个SnackBar, 不妨新建一个默认的体验一下官方的设计思想.适用于只是告诉用户发生了什么, 常见于系统的通知, 但是有很大的局限性,就是只能通知用户, 而做不到和用户进行交互, 比如你不小心删除了一张照片而没有通过二次确认, 仅仅是toast通知你"已删除", 对用户而言是很难接受的事情.'
});

Toast

状态框

mp-cu

<button class="ui-btn" bindtap="$success">Success</button>
<button class="ui-btn" bindtap="$error">Error</button>

加载框

mp-cu

Loading() {
    //显示加载框
    this.$loading()
    //倒计时关闭加载
    setTimeout(()=>{
        this.$hideLoading()
    },1500)
}

Tips参数

可以使用 this.$tips('你好呀'); 和 this.$tips({..}); 的方式,下文为 object 方式的参数说明。

参数类型可选值默认值说明
titleString--标题
durationNumber-1500关闭倒计时
iconString--图标
maskBoolean/Stringfalse,true,80,20,40false遮罩
successEvent-res事件

Toast 方法

参数说明
$success成功提示框
$error错误提示框
$loading加载框
$hideLoading关闭加载框
Prev
模态框 ui-modal
Next
选项卡 ui-tab