加载 Loading

加载数据时显示动效，阻止用户进行数据操作，并且可以设置文本对用户进行提醒。

基础用法

区域加载

在容器中加载数据时显示,使用此组件时，父级容器必须支持子级设置绝对定位（position: absolute）,否则遮挡区域将会扩大到外层

<title>区域加载</title>
<describe>在容器中加载数据时显示,使用此组件时，父级容器必须支持子级设置绝对定位（position: absolute）,否则遮挡区域将会扩大到外层</describe>
<template>
  <div style="height: 200px; position: relative; border: 1px solid #eee;">
    <hc-loading v-model="show"></hc-loading>
  </div>
</template>

<script>
export default{
  data: function () {
    return {
      show: true
    }
  }
}
</script>

自定义

可自定义加载文案、图标颜色和背景色。

text属性的值会被渲染为加载文案，并显示在加载图标的下方。类似地，background-color、icon-color和text-color属性分别用来设定背景色值、图标色值和文本色值。

<title>可自定义加载文案、图标颜色和背景色。</title>
<describe>text属性的值会被渲染为加载文案，并显示在加载图标的下方。类似地，background-color、icon-color和text-color属性分别用来设定背景色值、图标色值和文本色值。</describe>
<template>
  <div style="height: 200px; position: relative; border: 1px solid #eee;">
    <hc-loading
      v-model="show"
      text="拼命加载中"
      background-color="rgba(0, 0, 0, 0.8)"
      text-color="#409eff"
      icon-color="#409eff"
    ></hc-loading>
  </div>
</template>

<script>
export default{
  data: function () {
    return {
      show: true
    }
  }
}
</script>

属性及事件

HcLoading 属性

名称	说明	类型	可选值	默认值
text	加载显示文本	string	--	--
background-color	自定义遮罩背景颜色	string	css颜色样式	--
text-color	自定义文本颜色	string	css颜色样式	--
icon-color	自定义图标颜色	string	css颜色样式	--