HUI-VUE-Pro

# Empty 缺省

版本：1.14.0

开发：高明君

UI：应佩佩

规范：[已评审] http://iris.hikvision.com.cn/huidesign/des/graphic/issues/1

# 安装

$ npm i @hui-pro/empty -D
# 或者
$ yarn add @hui-pro/empty --dev

# 引入

import Empty from '@hui-pro/empty';
import '@hui-pro/empty/theme/index.scss';
Vue.use(Empty);

# 基础用法

no data

基础用法
<h-empty />

# 内置类型

请求失败：

error

error-control

error-net

error-server

error-video

error-image

无数据：

no-data

no-data-map

no-result

no-result-car

no-result-video

默认显示：

default-image

default-image-2

default-map

default-video

其他：

invalid

update

内置类型
<h-empty>
  <template #img>
    <h-empty-error-net />
  </template>
</h-empty>

TIP

关于 SVG 一些使用问题 传送门

# 尺寸

xs

自定义描述

sm

自定义描述

md

自定义描述

lg

自定义描述

md

自定义标题

自定义描述

lg

自定义标题

自定义描述

尺寸展示
<div class="custom-item" v-for="i in 6">
  <span>{{{ 1:'xs', 2:'sm', 3:'md', 4:'lg', 5:'md', 6:'lg' }[i]}}</span>
  <h-empty
    :size="{
      1:'xs',
      2:'sm',
      3:'md',
      4:'lg',
      5:'md',
      6:'lg'
    }[i]"
  >
    <template #img>
      <h-empty-invalid />
    </template>
    <template v-if="i > 4" #title>
      自定义标题
    </template>
    <template #description>
      自定义描述
    </template>
  </h-empty>
</div>

# 自定义内容

自定义标题

自定义描述

自定义标题

还没有监控点，去

403

自定义标题

自定义内容
<el-row :gutter="16">
  <el-col class="demo-custom-wrapper" :span="12">
    <h-empty>
      <h-empty-upload />
    </h-empty>
  </el-col>
  <el-col class="demo-custom-wrapper" :span="12">
    <h-empty
      img="/hui-pro/images/error403.png"
      title="自定义标题"
      description="自定义描述"
    />
  </el-col>
</el-row>
<el-row :gutter="16">
  <el-col class="demo-custom-wrapper" :span="12">
    <h-empty>
      <template #img>
        <h-empty-upload />
      </template>
      <template #title>
        自定义标题
      </template>
      <template #description>
        还没有监控点，去
        <el-button type="text" @click="handleClick">
          添加
        </el-button>
      </template>
    </h-empty>
  </el-col>
  <el-col class="demo-custom-wrapper" :span="12">
    <h-empty>
      <template #img>
        <img src="/hui-pro/images/error403.png" alt="403" />
      </template>
      <template #title>
        自定义标题
      </template>
    </h-empty>
  </el-col>
</el-row>

TIP

自定义优先级：slot default > slot > attributes

# API

# Attributes

参数 说明 类型 可选值 默认值
size 缺省尺寸，fit 为自适应，custom 为自定义尺寸 Fix：String 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'fit', 'custom' 1.13.1+ 'md'
img 缺省图 url String - -
title 标题文案 String - -
description 描述文案 String - -
media 自定义自适应 String - -

# Slot

参数 说明 类型 可选值 默认值
img 占位图 Slot - 'no-data'
title 标题文案 Slot - -
description 描述文案 Slot - '暂无数据'

# 尺寸说明

参数 说明
T 仅文本
XS 56px * 56px
SM 72px * 72px
MD 104px * 104px
LG 160px * 160px

# 细节

参数 Title/Font-size Description/Font-size Title/Margin-top Description/Margin-top
MD - 16 px - 16 px
MD（Title） 16 px 14 px 16 px 4 px
LG - 16 px - 16 px
LG（Title） 18 px 16 px 16 px 8 px

# fit 模式适配规则

宽（纵）\ 高（横） 180 240 400 554 1044+
180 T T T T T
240 T XS XS XS XS
256 T XS SM SM SM
1080 T XS MD MD MD
1920+ T XS MD LG LG

← Helper 插件助手 →