关闭Toast

虽然关闭Toast是一个很小的功能, 但是记录下来也无妨( 样式就不写了 )
项目背景是vue

<template>
	<div>
		<p @click = 'openbtn'>打开Toast</p>
		<p @click = 'closebtn'>关闭Toast</p>
	</div>
</template>
<script>
	var showto = null //定义toast的变量
	export default{
		name:'',
		return(){},
		methods:{
			openbtn(){
				showto = Toast('我显示了')
			},
			closebtn(){
				if(showto) 
				showto.close()
			}
		}
	} 
</script>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 UniApp 中封装一个 Toast 组件非常简单,可以按照以下步骤进行操作: 1. 创建一个新的 .vue 文件,用于封装 Toast 组件。 2. 在该文件中,定义一个 template(模板)来展示 Toast 内容,例如: ```html <template> <div class="toast">{{ message }}</div> </template> ``` 3. 在该文件中,使用 props 来接收 Toast 组件的参数,例如: ```javascript <script> export default { props: { message: String } } </script> ``` 4. 使用 CSS 样式来美化 Toast 组件的外观,例如: ```css <style scoped> .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 20px; background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 4px; } </style> ``` 5. 在需要使用 Toast 的页面或组件中,引入并注册 Toast 组件。例如,在 App.vue 中注册: ```javascript <template> <div> <toast :message="toastMessage" v-if="showToast"></toast> <!-- 其他内容 --> </div> </template> <script> import Toast from '@/components/Toast.vue' export default { components: { Toast }, data() { return { showToast: false, toastMessage: '' } }, methods: { showToast(message) { this.toastMessage = message this.showToast = true // 设置一定时间后关闭 Toast setTimeout(() => { this.showToast = false }, 2000) } } } </script> ``` 6. 在需要弹出 Toast 的地方,调用 showToast 方法,并传入相应的消息: ```javascript this.showToast('Hello, UniApp!') ``` 这样,你就成功地封装了一个简单的 Toast 组件,在需要时可以随时调用并显示相应的提示信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值