# Toast 轻提示

请扫码查看示例

# 介绍

简易的消息提示框。\n 告知用户任务状态，操作结果，例如：发送成功，加载中，删除成功。 Toast 会在屏幕所有层的最上方。显示时间有限，1s+左右消失考虑到显示的时间，容易被用户忽略，不适合承载过多的文字和重要信息。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-toast" src="@/node_modules/mui-minix/src/toast/index"></element>
<m-toast active="{{basic}}" message="连接中" @m-close="onClose"></m-toast>

1
2

export default {
  data(){
    return {
      basic: false
    }
  },
  onClose(){
    this.basic = false
  }
}

1
2
3
4
5
6
7
8
9
10

# 自定义主题

通过设置 mode 属性, 可以控制提示的风格。支持 dark light 两种模式。默认为 dark。

<element name="m-toast" src="@/node_modules/mui-minix/src/toast/index"></element>
<div>
  <m-toast mode="dark" active="{{dark}}" message="自适应长度，请稍后尝试刷新" @m-close="onCloseDark"></m-toast>
  <m-toast mode="light" active="{{light}}" message="设备未响应，请稍后尝试刷新，超出就换行了这是文案" @m-close="onCloseLight"></m-toast>
</div>

1
2
3
4
5
6

export default {
  data(){
    return {
      dark: false,
      light: false
    }
  },
  onCloseDark(){
    this.dark = false
  },
  onCloseLight(){
    this.light = false
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 显示loading

通过设置 loading 属性, 可以控制是否显示loading。

<element name="m-toast" src="@/node_modules/mui-minix/src/toast/index"></element>
<div>
  <m-toast active="{{loading}}" message="连接中" loading="{{true}}" @m-close="onCloseLoading"></m-toast>
</div>

1
2
3
4
5

export default {
  data(){
    return {
      loading: false
    }
  },
  onCloseLoading(){
    this.loading = false
  }
}

1
2
3
4
5
6
7
8
9
10

# 显示图标

通过设置 icon 属性, 可以控制显示的图标。

<element name="m-toast" src="@/node_modules/mui-minix/src/toast/index"></element>
<div>
  <m-toast active="{{icon}}" message="连接中" icon="star" @m-close="onCloseIcon"></m-toast>
</div>

1
2
3
4
5

export default {
  data(){
    return {
      icon: false
    }
  },
  onCloseIcon(){
    this.icon = false
  }
}

1
2
3
4
5
6
7
8
9
10

# Api

# Prop

字段	说明	类型	默认值	是否必须
`active`	是否显示提示	`boolean`	`false`	`是`
`overlay`	是否显示遮罩层	`boolean`	`false`	`否`
`z-index`	z 轴排序	`number`	`1030`	`否`
`position`	位置，可选值为 `center` `bottom`	`string`	`bottom`	`否`
`duration`	显示至消失的时长	`number`	`1600`	`否`
`message`	显示的内容	`string`	`-`	`是`
`icon`	显示的图标	`string`	`-`	`否`
`loading`	是否显示加载	`boolean`	`false`	`否`
`mode`	主题模式，可选值为`dark` `light`	`string`	`dark`	`否`

# Events

名称	说明	回调参数
`m-close`	提示消失时触发	`-`