Uniapp 自定义组件的封装和使用

原创已于 2023-07-14 17:28:58 修改 · 852 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #swift #开发语言

于 2023-07-14 17:27:31 首次发布

该文章展示了如何创建一个名为message.vue的自定义对话框组件，利用uni-popup实现通用弹窗功能。组件包含一个uni-card，显示传入的文本标题，并在外部组件中通过ref引用调用show方法来显示和控制对话框。当对话框关闭时，会清除定时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以一个自定义对话框为例子，首先先创建一个message.vue。

<template>
	<view>
		<!-- 通用弹窗 -->
		<uni-popup ref="message" style="pointer-events: all;zoom: 0.4;z-index: 999999;" @change="messageChange">
			<uni-card>
				<view class="uni-flex uni-column" style="padding: 50px;">
					<text
						style="font-size: 40px;color: black;width: 100%;height: 100%;align-items: center;justify-content: center;">{{toastTitle}}</text>
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	var closeDialog;
	export default {
		name: 'message',
		data() {
			return{
				toastTitle: ""
			}
		},
		methods: {
			show(str) {
				this.toastTitle = str;
				this.$refs.message.open();
			},
			messageChange(event) {
				if (!event.show) { //被关闭
					clearInterval(closeDialog);
				}
			},
		},
	}
</script>

<style>
</style>

使用的时候需要在对应的组件中引入对应的组件。

<template>
	<view>
        <message ref="message"></message>
	</view>
</template>
<script>
	import message from "@/components/message.vue"
    export default {
        data() {
			return{
            //...
            }
        },
        components:{
			message //引用对应的组件，这里的message需要与标签中的message对应。
		},
        methods: {
            this.$refs.message.show(str);//这里的message需要与ref中的message对应，这样就可以调用到message.vue中的show方法了。
        }    
    }
</script>