mpx-cube-ui

# Cube-Toast 轻提示

# 介绍

Toast 组件常用于用于非模态信息提醒，无需用户交互。

# 示例

# 基础用法

通过调用组件的 show、hide 方法来控制组件的显示与隐藏。

收起 
<template>
  <view class="toast-example-demo">
    <cube-button  bindclick="clickToast">Toast - 基本使用</cube-button>
    <cube-toast
      txt="toast"
      wx:ref="toast">
    </cube-toast>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    methods: {
      clickToast() {
        this.$refs.toast.show()
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 自定义图标

通过设置 icon 属性可以使用组件库自带的 icon，组件自身还提供了默认的插槽，也可以用以自定义 icon 图标的插入。

收起 
<template>
  <view class="mt-20 toast-with-self-defined-icon-demo">
    <cube-button  bindclick="clickToast">Toast - use system icon</cube-button>
    <cube-toast

      txt="预约暂不支持多车型，部分车型无法预约"
      icon="delete"
      wx:ref="toast">
    </cube-toast>
    <cube-button  bindclick="clickToast('img')" class="mt-20">Toast - use image icon</cube-button>
    <cube-toast

      txt="请输入乘车人手机号"
      wx:ref="toastImg">
      <image class="custom-img" src="https://dpubstatic.udache.com/static/dpubimg/c40384a2-25ef-4781-8e08-44447823d861.png" mode="aspectFit"></image>
    </cube-toast>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    options: {
      styleIsolation: 'shared'
    },
    methods: {
      clickToast(type) {
        if (type === 'img') {
          this.$refs.toastImg.show()
        } else {
          this.$refs.toast.show()
        }
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
visible 遮盖层初始状态是否可见 Boolean - false
maskClosable 遮罩是否可点击 Boolean - false
maskFadeTransition 遮罩是否渐显 Boolean - false
icon 图标类型（自动添加cubeic-前缀） String 图标 Icon，更多选择参见内置 Icon (opens new window) -
mask 遮罩 Boolean - false
time 显示时间（设置为 0 时不会自动消失，需要手动隐藏） Number - 1500
zIndex 样式 z-index 的值 Number - 900
txt 提示信息文案（一行最多只能展示十二个文字最多展示两行） String - -

# Events

事件名 说明 参数
toggle 显示/隐藏时触发 event.detail = { value }， 表当前状态是显示还是隐藏
timeout 达到超时时间后触发 -

# Slots

插槽名 说明
— (默认插槽) -

# Methods

组件实例方法 说明 参数 返回值
show 显示 - -
hide 隐藏 - -

# CSS Variable

变量名 默认值 含义
$toast-dark-opacity-bgc
rgba(0, 0, 0, 0.8)
 背景颜色
$toast-z-index
900
 叠层上下文
$toast-color 文字颜色
$toast-bgc 背景颜色
$toast-content-direction
unset
 内容布局方向
$toast-content-padding
15px 13px
 文本框内边距
$toast-content-border-radius
7px
 文本框圆角
$toast-icon-width
24px
 icon-宽度
$toast-icon-height icon-高度
$toast-icon-font-size icon-字号
$toast-icon-line-height
1
 icon-行高
$toast-slot-icon-margin
0 8px 0 0
 icon插槽-外边距
$toast-tip-font-size 文字字号
$toast-tip-line-height
1.43
 文字行高
$toast-tip-margin-left
8px
 文字左边距
$toast-tip-margin-bottom
0px
 文字底部边距
$toast-tip-max-width
12em
 文字最大宽度
$toast-tip-max-height
40px
 文字最大高度
$toast-tip-font-weight
unset
 文字字重
$toast-tip-text-align
unset
 文字对齐方式

← Dialog 弹出框 →