状态展示页 StatusShow

展示页面当前的状态。

展示与隐藏状态展示页

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

示例代码

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

状态展示类型

通过type属性设置为successerrornetworkcartorderaddressdataproduct创建不同类型状态展示页。默认值为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属性设置图片和文案描述。

示例代码

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

自定义背景色

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

示例代码

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

自定义状态展示页

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

示例代码

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

状态展示页属性(StatusShow Attributes)

参数说明类型可选值默认值
show显示与隐藏状态展示页Boolean——fasle
type状态展示页类型Stringsuccess/error/network/cart/order/address/datasuccess
full-screen是否全屏显示Boolean——true
button-text按钮文案String———-
image自定义图片String———-
describe自定义描述文案String———-
custom自定义状态展示页Boolean——false
bg-color自定义状态展示页背景色String——#fff

状态展示页外部样式类(StatusShow ExternalClasses)

外部样式类名说明备注
l-class覆盖整体的外部样式类—-
l-image-class覆盖图片部分的外部样式类—-
l-describe-class覆盖文案描述部分的外部样式类—-
l-button-class覆盖按钮部分的外部样式类—-

状态展示页事件(StatusShow Events)

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