• 状态展示页 StatusShow
    • 展示与隐藏状态展示页
      • 示例代码
    • 状态展示类型
      • 示例代码
    • 按钮文案
      • 示例代码
    • 自定义图标及文案描述
      • 示例代码
    • 自定义背景色
      • 示例代码
    • 自定义状态展示页
      • 示例代码
    • 状态展示页属性(StatusShow Attributes)
    • 状态展示页事件(StatusShow Events)

    状态展示页 StatusShow

    展示页面当前的状态。

    展示与隐藏状态展示页

    设置show属性控制状态展示的隐藏与显示。默认值为false

    示例代码

    1. <l-status-show show="{{true}}"></l-status-show>

    状态展示类型

    通过type属性设置为successerrornetworkcartorderaddress创建不同类型状态展示页。默认值为success

    示例代码

    1. <l-status-show show="{{true}}" type="success"></l-status-show>

    按钮文案

    通过button-text属性设置按钮内的文案。

    注意事项

    按钮文案存在时按钮才会显示。当type属性设置为cartnetwork时有默认按钮文案, 可通过button-text属性进行覆盖。

    示例代码

    1. <l-status-show show="{{true}}" type="success" button-text="返回"></l-status-show>

    自定义图标及文案描述

    通过设置image属性和describe属性设置图片和文案描述。

    示例代码

    <l-status-show show="{{true}}" image="../../image.png" describe="我是描述文案"></l-status-show>
    

    自定义背景色

    通过设置bg-color属性设置状态展示页背景色。

    示例代码

    <l-status-show bg-color="f3f3f3" show="{{true}}"></l-status-show>
    

    自定义状态展示页

    通过设置custom属性可设置自定义状态展示页。通过slot传入自定义的状态展示内容。

    示例代码

    <l-status-show show="{{true}}">
      <image src="../../image.png" />
    </l-status-show>
    

    状态展示页属性(StatusShow Attributes)

    参数说明类型可选值默认值
    show显示与隐藏状态展示页Boolean——fasle
    type状态展示页类型Stringsuccess/error/network/cart/order/addresssuccess
    button-text按钮文案String———-
    image自定义图片String———-
    describe自定义描述文案String———-
    custom自定义状态展示页Boolean——false
    bg-color自定义状态展示页背景色String——#fff
    l-image-class覆盖图片部分的外部样式类String———-
    l-describe-class覆盖文案描述部分的外部样式类String———-
    l-button-class覆盖按钮部分的外部样式类String———-

    状态展示页事件(StatusShow Events)

    事件名称说明返回值备注
    bind:lintap点击按钮触发的事件—-—-