小程序开发框架

# 介绍

空状态时的占位提示。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-empty": "/miniprogram_npm/m-ui/mx-empty/index",
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

<mx-empty description="描述文字" />

# 图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 图片默认 -->
<mx-empty image="device-no" description="暂无设备" />

<!-- 暂无设备 -->
<mx-empty image="default" description="抱歉，亲查询的网点不存在" >
  <view class="words-color"> 您可以拨打24小时服务热线咨询</view>
  <view class="tel" catchtap="toCall">{{ telNumber }}</view>
</mx-empty>

<!-- 网点不存在 -->
<mx-empty image="network-no" description="抱歉，亲查询的网点不存在" >
  <button catchtap="refreshNet">刷新</button>
</mx-empty>

page({
  data: {
    telNumber: '400-8899-315',
  },

  toCall() {
    wx.makePhoneCall({
      phoneNumber: this.data.telNumber,
      success: function () {
        console.log('成功拨打电话')
      },
    })
  },

  refreshNet() {
    wx.showToast({
      title: '刷新',
      duration: 1000,
    })
  },

})

# 自定义图片

用于确认消息，包含取消、确认、更多按钮。

<mx-empty
  class="custom-image"
  image="https://img.tukuppt.com/ad_preview/00/12/95/5ddd1d226b71d.jpg!/fw/780"
  description="描述文字"
/>

# 底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<mx-empty image="default" description="抱歉，亲查询的网点不存在" >
  <view class="words-color"> 您可以拨打24小时服务热线咨询</view>
  <view class="tel" catchtap="toCall">{{ telNumber }}</view>
</mx-empty>

Page({
  toCall() {
    wx.makePhoneCall({
      phoneNumber: this.data.telNumber,
      success: function () {
        console.log('成功拨打电话')
      },
    })
  },
})

<style>
.words-color {
  font-size: 14px;
  color: #666666 ;
  text-align: center;
}
.tel {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #267AFF;
  letter-spacing: 0;
  text-align: center;
  line-height: 16px;
  font-weight: 500;
  margin-top: 24px;
}
</style>

# API

# Props

通过函数调用 Dialog 时，支持传入以下选项：

参数 说明 类型 默认值
image 图片类型，可选值为 default，card-no，device-no，home-no，location-no，message-no','network-no，order-no，recipe-no，redpacket-no，result-no，service-no，timing-no，update-no，wifi-no，支持传入图片 URL string default
description 图片下方的描述文字 string -

# Slot

名称 说明
- 自定义底部内容
image 自定义图标
description 自定义描述文字

← 轻提示（toast） →