m***@qq.com
m***@qq.com
  • 发布:2022-05-20 16:37
  • 更新:2023-11-06 13:09
  • 阅读:3718

vue3 setup 语法糖中使用uniui popup

分类:uni-app

官方文档中还有些例子是vue2的写法

下面代码是一个简单的示例,供大家参考。

<template>  
  <view>  
    		<view>  
			<!-- 提示信息弹窗 -->  
			<uni-popup ref="message" type="message">  
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>  
			</uni-popup>  
		</view>  
  
			<button type="primary" @click="messageToggle('success')">MESSAGE</button>  
  
  </view>  
</template>  
  
  
<script setup>  
  
	import {  
		ref,  
		onMounted  
	} from 'vue'  
  
  
	const message = ref(null)  
	const msgType = ref('')  
	const messageText = ref('')  
  
  
	onMounted(()=>{  
		console.log('onMounted')  
		// console.log(message.value)  
	})  
	function messageToggle(type) {  
		msgType.value = type  
		messageText.value = `这是一条${type}消息提示`  
		// this.$refs.message.open()  
		message.value.open()  
	}  
</script>  

1 关注 分享
j***@163.com

要回复文章请先登录注册

苦哈哈的搬砖员

苦哈哈的搬砖员

<script setup>
import { getCurrentInstance } from 'vue'
// 获取当前组件实例
const { ctx } = getCurrentInstance();

ctx.$refs.way.open()
<script>

可以这样用
2023-11-06 13:09
m***@163.com

m***@163.com

回复 2***@qq.com :
我也报这个错误,vue3版本下 怎么使用
2023-10-11 09:46
喜欢技术的前端

喜欢技术的前端

重新创建个hello 的vue3 版本官方事例,把hello里面的 uni_modules 里面的文件覆盖自己的文件,(●'◡'●)
2023-08-15 16:17
c***@qq.com

c***@qq.com

回复 2***@qq.com :
我这也报这个错
2023-08-15 15:52
2***@qq.com

2***@qq.com

报错 Cannot read property 'open' of null at messageToggle
2023-08-11 17:35