界面组件 UI Components

消息弹框 Toast

  1. 纯文本消息框
  2. 状态指示消息框
  3. 应用场景
  4. Vue.js Reference
  5. React Native Reference

消息弹窗用于提示用户当前页面出现的重要程度一般的信息，用户仅需了解，即使忽略也对随后操作也不造成太大影响。 消息弹框无需用户点击按钮才能消除，用户可通过点击屏幕任意位置消除弹框，或者弹框超出停留时间后自动消失。

适用情况

  • 需要用户了解的，重要程度一般的信息。

不适用情况

  • 需引起用户特别注意，重要程度高的信息。建议：使用弹窗 (Modal) 让用户确认信息。

纯文本消息框

使用纯文本提示用户信息。由于消息弹框出现时间较短，使用时应尽量避免长文本，尽量控制文本在屏幕的一行以内。

<up-toast v-model="toastShow">超出获取数量，暂不能获取</up-toast>
<up-toast v-model="toastShowLongText">提示框的最大宽度为 321px。应适当控制文字长度，避免阅读成为用户负担。</up-toast>
<up-toast v-model="toastShowExtraLongText">提示框的最大宽度为 321px。应适当控制文字长度，避免阅读成为用户负担。当文字数量超出范围时，截断显示。</up-toast>
<script>
    export default {
        data() {
            return {
			toastShow:false,
			toastShowLongText:false,
			toastShowExtraLongText:false,
            }
        }
    }
</script>

import {Button, Toast} from 'up-qp-dls';

<Button title='短文字' onPress={() => Toast.message('超出获取数量，暂不能获取')} />
<Button title='长文字' onPress={() => Toast.message('提示框的最大宽度为 321px。应适当控制文字长度，避免阅读成为用户负担。')} />
<Button title='超长文字'  onPress={() => Toast.message('提示框的最大宽度为 321px。应适当控制文字长度，避免阅读成为用户负担。当文字数量超出范围时，截断显示。')} />

状态指示消息框

状态指示消息框用于告知用户操作进行中，通常出现在调取数据情况下。状态指示器表示系统后台正在处理用户的指令。 当系统操作超过3秒、需用户等待时，界面应显示加载状态，结束时告知用户操作完成或操作失败。

<up-toast v-model="toastShowSuccess" type="success">操作成功</up-toast>
<up-toast v-model="toastShowLoading" type="loading">加载中</up-toast>
<up-toast v-model="toastShowError" type="error">操作失败文案</up-toast>
<script>
    export default {
        data() {
            return {
				toastShowSuccess:false
				toastShowLoading:false,
				toastShowError:false,
            }
        }
    }
</script>

import {Button, Toast} from 'up-qp-dls';

<Button title='成功' onPress={() => Toast.success('操作成功')} />
<Button title='载入中' onPress={() => Toast.loading('加载中')} />
<Button title='失败' onPress={() => Toast.error('操作失败文案')} />

应用场景

  • 消息弹框 (Toast) 是一个轻量的组件，由于其无需操作即会自动消失的特点，适合承载一般性的，信息量少的，无需用户特别注意的提醒或结果。

  • 如果是一个需要用户特别注意的提醒或者结果，建议使用不会自动消失，需要用户进行确认操作的弹窗（Modal）。

  • 如果信息量多，则建议使用完整的页面展示。

Vue.js Reference

属性 说明 类型 可选值 默认值
v-model 弹框状态，双向数据绑定 String - -
type 弹窗类型 String message,loading,success,error message
delay 延迟消失的时间ms,为0时不消失 Number - 2000

React Native Reference

方法 参数说明
Toast.message(title); 弹出文本消息框
Toast.loading(title); 弹出载入中提示
Toast.success(title); 弹出成功提示
Toast.error(title); 弹出失败提示