低代码高性能原生UI框架Toast
组件类型：UxToastComponentPublicInstance
支持上下左右位置显示，支持拖拽关闭、自动关闭，内置多种关闭动画
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| position | String | top | 显示位置 |
| anim | String | fade | 动画效果 |
| max | Number | 0不限制 | 最大存在个数 |
| offset | Any | 15 | 偏移 |
| threshold | Any | 100 | 移动阈值 |
| logoWidth | Any | 30 | Logo宽 |
| logoHeight | Any | 30 | Logo高 |
| logoRadius | Any | 10 | Logo圆角 |
| duration | Number | 700 | 关闭过渡时间 |
| autoclose | Boolean | true | 自动关闭 |
| clickclose | Boolean | true | 点击关闭 |
| touchclose | Boolean | false | 长按拖拽关闭暂只支持Web |
position
| 值 | 说明 |
|---|---|
| center居中显示 | |
| top居上显示 | |
| right居右上显示 | |
| bottom居下显示 | |
| left居左上显示 |
anim
| 值 | 说明 |
|---|---|
| fade渐变过渡 | |
| none无动画 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="消息提示框" :bold="true">
<ux-text text="支持上下左右位置显示，支持拖拽关闭、自动关闭，内置多种动画效果"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="添加消息" :bold="true">
<ux-button text="居上显示" @click="top()"></ux-button>
<ux-button :mt="10" text="居下显示" @click="bottom()"></ux-button>
<ux-button :mt="10" text="居左显示" @click="left()"></ux-button>
<ux-button :mt="10" text="居右显示" @click="right()"></ux-button>
<ux-button :mt="10" text="居中显示" @click="center()"></ux-button>
<ux-button :mt="10" text="居中显示 无过渡动画" @click="none()"></ux-button>
<ux-button :mt="10" text="手动关闭 支持左右拖拽关闭" @click="close()"></ux-button>
<ux-button :mt="10" text="自定义插槽" @click="custom()"></ux-button>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
<ux-toast ref="uxToastTopRef" position="top"></ux-toast>
<ux-toast ref="uxToastRightRef" position="right"></ux-toast>
<ux-toast ref="uxToastBottomRef" position="bottom"></ux-toast>
<ux-toast ref="uxToastLeftRef" position="left"></ux-toast>
<ux-toast ref="uxToastCenterRef" position="center"></ux-toast>
<ux-toast ref="uxToastNoneRef" position="center" anim="none"></ux-toast>
<ux-toast ref="uxToastCloseRef" position="bottom" :autoclose="false" :touchclose="true"></ux-toast>
<ux-toast ref="uxToastCusttomRef" position="bottom">
<template v-slot="e">
<ux-toast-item :itemId="e.itemId" :radius="0">
<view class="msg">
<ux-image :width="40" :height="40" :src="e.data.logo"></ux-image>
<ux-text :mt="10" :text="e.data.content"></ux-text>
</view>
</ux-toast-item>
</template>
</ux-toast>
</ux-page>
</template><template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="消息提示框" :bold="true">
<ux-text text="支持上下左右位置显示，支持拖拽关闭、自动关闭，内置多种动画效果"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="添加消息" :bold="true">
<ux-button text="居上显示" @click="top()"></ux-button>
<ux-button :mt="10" text="居下显示" @click="bottom()"></ux-button>
<ux-button :mt="10" text="居左显示" @click="left()"></ux-button>
<ux-button :mt="10" text="居右显示" @click="right()"></ux-button>
<ux-button :mt="10" text="居中显示" @click="center()"></ux-button>
<ux-button :mt="10" text="居中显示 无过渡动画" @click="none()"></ux-button>
<ux-button :mt="10" text="手动关闭 支持左右拖拽关闭" @click="close()"></ux-button>
<ux-button :mt="10" text="自定义插槽" @click="custom()"></ux-button>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
<ux-toast ref="uxToastTopRef" position="top"></ux-toast>
<ux-toast ref="uxToastRightRef" position="right"></ux-toast>
<ux-toast ref="uxToastBottomRef" position="bottom"></ux-toast>
<ux-toast ref="uxToastLeftRef" position="left"></ux-toast>
<ux-toast ref="uxToastCenterRef" position="center"></ux-toast>
<ux-toast ref="uxToastNoneRef" position="center" anim="none"></ux-toast>
<ux-toast ref="uxToastCloseRef" position="bottom" :autoclose="false" :touchclose="true"></ux-toast>
<ux-toast ref="uxToastCusttomRef" position="bottom">
<template v-slot="e">
<ux-toast-item :itemId="e.itemId" :radius="0">
<view class="msg">
<ux-image :width="40" :height="40" :src="e.data.logo"></ux-image>
<ux-text :mt="10" :text="e.data.content"></ux-text>
</view>
</ux-toast-item>
</template>
</ux-toast>
</ux-page>
</template>ts
<script setup>
import * as plus from '@/uni_modules/ux-plus'
import { $ux } from '@/uni_modules/ux-frame'
import { UxToastData } from '@/uni_modules/ux-frame'
const title = ref('')
const uxToastTopRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastRightRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastBottomRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastLeftRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastCenterRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastNoneRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastCloseRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastCusttomRef = ref<UxToastComponentPublicInstance | null>(null)
let len = 0
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/toast.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
function top() {
len++
uxToastTopRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居上显示的消息${len}`,
} as UxToastData)
}
function right() {
len++
uxToastRightRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居右显示的消息${len}`,
} as UxToastData)
}
function bottom() {
len++
uxToastBottomRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居下显示的消息${len}`,
} as UxToastData)
}
function left() {
len++
uxToastLeftRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居左显示的消息${len}`,
} as UxToastData)
}
function center() {
len++
uxToastCenterRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居中显示的消息${len}`,
} as UxToastData)
}
function none() {
len++
uxToastNoneRef.value?.$callMethod('show', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个无动画的居中显示的消息${len}`,
} as UxToastData)
}
function close() {
len++
uxToastCloseRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个手动关闭的消息${len}`,
} as UxToastData)
}
function custom() {
len++
uxToastCusttomRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个插槽消息${len}`,
} as UxToastData)
}
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
import { $ux } from '@/uni_modules/ux-frame'
import { UxToastData } from '@/uni_modules/ux-frame'
const title = ref('')
const uxToastTopRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastRightRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastBottomRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastLeftRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastCenterRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastNoneRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastCloseRef = ref<UxToastComponentPublicInstance | null>(null)
const uxToastCusttomRef = ref<UxToastComponentPublicInstance | null>(null)
let len = 0
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/toast.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
function top() {
len++
uxToastTopRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居上显示的消息${len}`,
} as UxToastData)
}
function right() {
len++
uxToastRightRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居右显示的消息${len}`,
} as UxToastData)
}
function bottom() {
len++
uxToastBottomRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居下显示的消息${len}`,
} as UxToastData)
}
function left() {
len++
uxToastLeftRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居左显示的消息${len}`,
} as UxToastData)
}
function center() {
len++
uxToastCenterRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个居中显示的消息${len}`,
} as UxToastData)
}
function none() {
len++
uxToastNoneRef.value?.$callMethod('show', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个无动画的居中显示的消息${len}`,
} as UxToastData)
}
function close() {
len++
uxToastCloseRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个手动关闭的消息${len}`,
} as UxToastData)
}
function custom() {
len++
uxToastCusttomRef.value?.$callMethod('push', {
id: $ux.Random.uuid(), // 务必保证此字段有值且唯一
logo: '/static/logo.png',
content: `这是一个插槽消息${len}`,
} as UxToastData)
}
</script>css
<style lang="scss">
.msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style><style lang="scss">
.msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>