Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果,我们为其提供了多种丰富的API。
注意:
由于uni中无法通过js创建元素,所以需要在页面中调用<toast />
组件,再通过ref
开启
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
#基本使用
以下为不同能力的toast的具体表现
<template><view><u-toast ref="uToast"></u-toast><u-cell-group title-bg-color="rgb(243, 244, 246)"><u-cell:titleStyle="{fontWeight: 500}":title="item.title"v-for="(item, index) in list":key="index"isLink:icon="item.iconUrl"@click="showToast(item)"></u-cell></u-cell-group></view>
</template><script>export default {data() {return {show: false,list: [{type: 'default',title: '默认主题',message: "锦瑟无端五十弦",iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'},{type: 'error',icon: false,title: '失败主题',message: "一弦一柱思华年",iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'},{type: 'success',title: '成功主题(带图标)',message: "庄生晓梦迷蝴蝶",iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'},{type: 'loading',title: '正在加载',message: "正在加载",iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'},{type: 'default',title: '结束后跳转标签页',message: "此情可待成追忆",url: '/pages/componentsB/tag/tag',iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'}],}},computed: {getIcon() {return path => {return 'https://cdn.uviewui.com/uview/example/' + path + '.png';}},},methods: {showToast(params) {this.$refs.uToast.show({...params,complete() {params.url && uni.navigateTo({url: params.url})}})}}}
</script>
<style lang="scss">.u-page {padding: 0;}.u-cell-icon {width: 36rpx;height: 36rpx;margin-right: 8rpx;}.u-cell-group__title__text {font-weight: bold;}
</style>