wk-view

Appearance

On this page

wkv-toast ​

轻提示，一种轻量级反馈/提示，适合用于页面转场、数据交互的等场景中。

用法 ​

html
<script setup>
  uni.$wkv.showToast('提示内容')

  uni.$wkv.showToast({
	  title: '提示内容',
  })
</script>

App 中使用 loading ​

为了更好的用户体验，App 中使用的是原生 Toast，无法添加动画，所以不能直接使用 uni.$wkv.showToast 展示 loading 状态。

如果想在 App 中使用 loading 状态的 Toast，可直接使用 wkv-toast 组件。

vue
<template>
	<wkv-toast ref="wkvToastRef"></wkv-toast>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const wkvToastRef = ref()

  wkvToastRef.value.showToast({
	  title: '提示内容',
	  icon: 'loading',
  })
</script>

Methods ​

函数名函数说明函数签名参数说明
showToast展示 Toast(options) => voidoptions: toast 内容配置
hideToast隐藏 Toast() => void-

Options 配置 ​

属性名类型默认值说明
titlestring-文字内容
iconstringnone图标类型，可选 success error loading none，loading 不支持 App
imagestring-自定义图标路径
maskbooleanfalse是否显示透明蒙层，防止触摸穿透，不支持 App
durationnumber1500展示时间
positionstringcenter展示位置，可选 top center bottom
successFunction-接口调用成功的回调函数
failFunction-接口调用失败的回调函数
completeFunction-接口调用结束的回调函数（调用成功、失败都会执行）

示例 ​

vue
<template>
	<view class="wkv-toast-example">
		<wk-section>纯文字：</wk-section>
		<wkv-button @click="handleTextToast">纯文字</wkv-button>

		<wk-section>图标 + 文字：</wk-section>
		<wkv-button @click="handleSuccessToast">success 图标 + 文字</wkv-button>
		<wkv-button @click="handleErrorToast">error 图标 + 文字</wkv-button>
		<wkv-button @click="handleLoadingToast">loading 图标</wkv-button>
		<wkv-button @click="handleNoneIconToast">none 图标</wkv-button>

		<wk-section>位置：</wk-section>
		<wkv-button @click="handleTopToast">顶部</wkv-button>
		<wkv-button @click="handleCenterToast">中间</wkv-button>
		<wkv-button @click="handleBottomToast">底部</wkv-button>
	</view>
</template>
vue
<script setup lang="ts">
const handleTextToast = () => {
	uni.$wkv.showToast('提示内容')
}

const handleSuccessToast = () => {
	uni.$wkv.showToast({
		title: '提示内容',
		icon: 'success',
	})
}

const handleErrorToast = () => {
	uni.$wkv.showToast({
		title: '提示内容',
		icon: 'error',
	})
}

const handleLoadingToast = () => {
	uni.$wkv.showToast({
		title: '提示内容',
		icon: 'loading',
	})
}

const handleNoneIconToast = () => {
	uni.$wkv.showToast({
		title: '提示内容',
		icon: 'none',
	})
}

const handleTopToast = () => {
	uni.$wkv.showToast({
		title: '提示内容',
		position: 'top',
	})
}

const handleCenterToast = () => {
	uni.$wkv.showToast({
		title: '提示内容',
		position: 'center',
	})
}

const handleBottomToast = () => {
	uni.$wkv.showToast({
		title: '提示内容',
		position: 'bottom',
	})
}
</script>
scss
<style lang="scss">
.wkv-toast-example {
	padding: 20px;

	.wkv-button + .wkv-button {
		margin-top: 10px;
	}
}
</style>