【uniapp】【Vue3】 超简单全局自定义弹窗组件Modal

最开始想写一个自定义背景的弹窗，因为要用到项目的好几个地方，不希望每个地方都需要引入。而且只需要放张图片，加个关闭按钮和功能按钮就行，类似这种效果：

开始写的时候找了一篇博客，写的很详细，但是这个是Vue2的，uniapp实现自定义弹窗组件，可以在app全局任意地方使用，很多地方都需要改造。

改造完发现其实完全不需要这么复杂，在uniapp项目里面，很简单的代码就能实现。
先说一下写代码的逻辑，写这个组件，实际上只需要写三个部分，一个是dom显示，放在components目录下，一个是Vuex的store进行状态管理，最后一个是实际使用的时候对store状态进行修改从而控制组件的显隐和内容。

Vuex进行状态管理

uni-app 内置了 Vuex，可以直接使用。
新建js文件，用来单独管理Vuex。

// state.js
import {
	createStore
} from 'vuex'
const store = createStore({
	state: { 
	  //存放状态
	  modal: {
	    // 控制modal的显隐
		show: false,
		confirmText: "确定",
		confirmColor: "#333333",
		confirmBackgroundColor: "#FFBB24",
		// 按钮跳转的url
		url: '',
		// 背景图的地址
		backgroundImage: '',
	  },	
	},
	mutations: {
		hideModal(state) {
			state.modal.show = false
		},
		showModal(state, value) {
			state.modal = Object.assign(state.modal, value)
			state.modal.show = true
		},
	},
})

export default store

main.js引入状态管理

// main.js
import store from './state/state.js'
export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  // ...
  return {
    app
  }
}

在components里面新建组件

使用HBuilder 进行开发的uniapp项目，只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

<!-- waiLiModal.vue -->
<template>
	<view class="mask-box" v-show="modal.show">
		<view class="mask-content">
			<view class="mask-title flex-row flex-end mr-20">
				<u-icon name="close-circle" size="60" @click="hideModal" style="color: #fff; float: right;"></u-icon>
			</view>
			<view class="mask-bg flex-row flex-center" v-if="modal.backgroundImage">
				<image :lazy-load="true" class="img" :src="modal.backgroundImage" mode="widthFix"></image>
			</view>
			<view class="flex-row flex-center">
				<view class="mask-footer-btn" @click="navTo(modal.url)">{{modal.confirmText}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		navTo
	} from '@/utils/tools.js'
	import {
		mapState,
		mapMutations,
	} from 'vuex';

	export default {
		name: "waiLiModal",
		data() {
			return {
				navTo,
			};
		},
		computed: {
			...mapState(['modal']),
		},
		methods: {
			...mapMutations(['hideModal']),
		},
	}
</script>

<style scoped lang="scss">
	.mask-box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		background-color: rgba(0, 0, 0, .2);
		top: 0;
		right: 0;

		.mask-content {
			width: 100%;
			position: absolute;
			top: 15%;
		}

		.mask-bg {
			.img {
				width: 90%;
			}
		}

		.mask-footer-btn {
			width: 150px;
			height: 50px;
			border-radius: 200px;
			background: linear-gradient(30deg, #fff, #d6d1fa, #b9aff9);
			text-align: center;
			line-height: 50px;
			font-size: 18px;
			color: #fff;
			font-weight: bold;
		}
	}
</style>

这样写好之后，就能直接在pages里面使用了。接下来，把写好的组件在需要显示的页面写好。因为要想控制显隐，肯定要全局加载，这里我放在了我自己写的tabbar里面。不然的话，就要在使用的页面里面引入。

<template>
	<view>
		<waiLiModal></waiLiModal>
	</view>
</template>

控制modal

store.commit('showModal', {
	backgroundImage: 'https://wailikeji.oss-cn-beijing.aliyuncs.com/chatgpt/sys/chatgpt/87681689927681_.pic.jpg',
	confirmText: "立即查看",
	// 按钮需要跳转的url
	url: '/pages/user/recharge/recharge'
})

如果有帮助的话，麻烦点个免费的赞或者关注吧^~。
如果有需要作者帮忙的，可以查看链接联系作者和查看作者是如何使用uniapp和uview组件哒。