• Toptips
    • 引入组件
    • 示例代码
    • 属性列表

    Toptips

    Toptips顶部错误提示组件,常用于表单校验或提交请求到后台成功或失败的错误提示,如下图所示。

    Toptips - 图1

    引入组件

    在 page.json 中引入组件

    1. {
    2. "usingComponents": {
    3. "mp-toptips": "../../components/toptips/toptips"
    4. }
    5. }

    示例代码

    1. <!--WXML示例代码-->
    2. <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
    1. // page.js示例代码
    2. Page({
    3. data: {
    4. error: ''
    5. },
    6. onShow() {
    7. this.setData({
    8. error: '这是一个错误提示'
    9. })
    10. }
    11. });

    属性列表

    属性类型默认值必填说明
    ext-classstring添加在组件内部结构的class,可用于修改组件内部的样式
    typestring提示类型,可以为info、error、success,表示三种提示颜色
    showbooleanfalse是否显示Toptips
    msgstring提示内容
    delaynumber2000提示内容显示后隐藏的ms值
    bindhideeventhandler顶部提示隐藏的时候触发的事件