Vue3.x 使用 createApp方法创建自定义对话框

最新推荐文章于 2024-06-17 17:08:35 发布

weixin_47276928

最新推荐文章于 2024-06-17 17:08:35 发布

阅读量620

点赞数

分类专栏： try vue自定义组件文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_47276928/article/details/126734289

版权

try 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

vue自定义组件

11 篇文章 1 订阅

订阅专栏

博客介绍了一个基于Vue和uni-ui的uni-popup组件，用于创建动态对话框。组件通过插件方式引入，无需在每个页面模板中定义，方便在多个场景下使用。代码展示了如何定义构造器、实现弹窗的打开和关闭以及回调函数，确保能捕获用户操作。同时，提供了创建组件实例、显示对话框、卸载组件的函数，并通过install方法使得用户可以方便地在项目中注册和使用该组件。

摘要由CSDN通过智能技术生成

对话框

在这里插入图片描述

该组件是个对话框，基于 Vue 、uni-ui 的【uni-popup】

组件调用方式、优点及需求来源

组件调用方式

this.$tipPop("请输入手机号/邮箱/用户名").then(() => {
	// 这里执行 确定后的回调
})

组件优点

使用插件方式引入，不需要在模板中定义

需求来源

一个对话框，使用页面很多，只有提示文件是动态的，但是需要知道用户点击了哪个按钮。每次都在模板中定义很麻烦

代码分析

tipsPop.vue（定义构造器）

<template>
	<uni-popup ref="popup" :mask-click="false">
		<view class="pop-box w-flex-column w-flex-cross-center">
			<uni-icons type="info" size="100" color="#f8cb86"></uni-icons>
			<text class="text-center">{{ popTxt }}</text>
		</view>
		<button type="primary" class="pop-btn" @click="submit">确定</button>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		defineExpose,
		onMounted
	} from 'vue';

	const callback = ref(null);
	const popup = ref()

	defineProps({
		popTxt: String
	});

	function openPop() {
		popup.value.open('center');
	}

	function submit() {
		callback.value();
	}
	defineExpose({
		callback,
		openPop
	})
</script>

<style scoped>
	.pop-box {
		width: 190px;
		padding: 10px 30px;
		background-color: #fff;
		border-radius: 6px 6px 0px 0px;
	}

	.pop-btn {
		width: 100%;
		background-color: #4cd964;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
	}
</style>

tipsPop.js（使用 extend 方法创建组件实例）

import {
	createApp
} from 'vue'
import TipsPop from './tipsPop.vue'

let cApp = null,
	mountDom = null,
	instance = null

// 创建实例
function initInstance(propsData) {
	cApp = createApp(TipsPop, propsData)
	mountDom = document.createElement('div')
	instance = cApp.mount(mountDom)
}

function mergeOpt({
	popTxt
}) {
	return {
		popTxt
	}
}

function showDialog() {
	document.body.appendChild(mountDom)
	instance.openPop()
}

function unmount() {
	cApp.unmount()
	mountDom = null
	instance = null
}

export default function(tips) {
	const propsData = mergeOpt({
		popTxt: tips
	})

	if (!instance) {
		initInstance(propsData)
	}
	showDialog()

	return new Promise((resolve, reject) => {
		instance.callback = () => {
			resolve()
			unmount()
		}
	})
}

install.js（抛出一个install 方法，用户插件注册）

import tips from './tipsPop.js'
export default {
	install: (app, options) => {
		app.config.globalProperties.$tipPop = tips
	}
}