Toast 轻提示

使用指南

代码演示

查看代码

<template>
  <div class="list">
    <h3-loading wrapCls="changeColor" iconColor="#fff" fontColor="#fff" />
    <h3-loading iconColor="#315EFB" />
    <h3-loading layout="horizontal" />
  </div>
</template>

<script>
import H3Loading from '@/components/h3-loading';

export default {
  name: 'Toast',
  components: {
    H3Loading,
  },
  data () {
    return {
      color: 'blue',
    };
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
}
.changeColor {
  background-color: #121933;
  opacity: 0.84;
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

新增loading组件

API

常规使用

<h3-loading content="加载中" />

Prop

属性	说明	类型	默认值
layout	组合布局方式，常规为左右horizontal、垂直vertical两种组合布局，可自定义	String	vertical
iconType	用于表示加载状态的图标样式，可自定义	String	IconLoadingStroke
iconColor	图标颜色	String	无
iconSize	图标大小, 默认单位为px	Number | String	44
textColor	文字颜色	String	#121933
content	提示文案（可选）用于说明当前加载状态或场景，可自定义文字颜色，建议文字描述尽量简短清晰	String	加载中
wrapCls	组合外框样式	String	无

Event

事件名	说明	参数

函数式调用

引用

import Vue from 'vue';
import {H3Loading} from '@lateinos/thinking-ui';
Vue.use(H3Loading);

方法