qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Message 消息通知

可进行消息提醒

使用指南

import { AtMessage } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/message.scss";

一般用法

说明

  • 必须在页面引入 <AtMessage />，使用 Taro.atMessage 函数进行调用传参数，参数 Options 为 Object 类型，见下表
<template>
  <view>
    <view class='example-item'>
      <AtButton @click="handleClick.bind(this, '')">
        普通消息
      </AtButton>
    </view>
    <view class='example-item'>
      <AtButton @click="handleClick.bind(this, 'success')">
        成功消息
      </AtButton>
    </view>
    <view class='example-item'>
      <AtButton @click="handleClick.bind(this, 'error')">
        错误消息
      </AtButton>
    </view>
    <view class='example-item'>
      <AtButton @click="handleClick.bind(this, 'warning')">
        警告消息
      </AtButton>
    </view>
    <view class='example-item'>
      <AtButton @click="handleClick.bind(this, 'info')">
        提示消息
      </AtButton>
    </view>
  </view>
</template>

<script>
  import Taro from '@tarojs/taro'
  export default {
    name: 'ToastPage',
    methods: {
      handleClick(type) {
        Taro.atMessage({
          message: '消息通知',
          type
        })
      }
    }
  }
</script>

Taro.atMessage Options 字段说明

参数说明类型可选值默认值
message文本消息内容String--
type消息类型Stringinfo，success，error，warning-
duration消息持续时间,单位 msNumber-3000