Vue手写dialog组件模态框过程详解

在vue项目下创建文件diaLOG

实现思路

1、dialog组件为模态框，因此应该是固定定位到页面上面的，并且需要留一定的插槽来让使用者自定义显示内容

2、难点在于如何一句话打开dialog，也就是下面的index.js文件的内容：导入我们已经写好的组件(可以先写一个及其简单的)，模块暴露出一个函数(DiaLog)用于生成dialog，这里主要利用到vue中的createApp函数，createApp创建应用，将应用挂载到我们的新建div标签上，随着用户触发点击事件，将div标签销毁即可

index.js文件

import dialog From './index.vue'import {
 createApp}
     from 'vue'export const DiaLog = (obj) =>
 {
	const app = createApp(dialog, {
    		...obj,		on_click: (flg) =>
 {
    			console.log(flg);
			div.remove()		}
,	}
)	const div = document.createElement('div')	app.mount(div)	document.body.apPEndChild(div)}
    

使用

template>
      div class="app">
    button @click="DiaLog({
_tITle:'我不想起标题'}
    )">
    起飞/button>
      /div>
    /template>
    script SETUP>
import {
 DiaLog }
     from './package/dialog/index.js'/script>
    style scoped lang="scss">
.app {
      height: 1200px;
}
    /style>
    

index.vue文件

template>
    	div class="dialog">
    		h1 v-if="PRops._title">
{
{
 props._title }
}
    /h1>
    		div>
    			slot>
    /slot>
    		/div>
    		div class="BTn">
    			button @click="emitFn(false)">
    取消/button>
    			button @click="emitFn(true)" class="success">
    确认/button>
    		/div>
    	/div>
    	div class="background" v-if="props._background">
    /div>
    /template>
    script setup>
const props = defineProps({
	_title: {
		type: String,		default: '无标题'	}
,	_background: {
		type: Boolean,		default: true	}
}
    )const emit = defineEmits([	'_click'])const emitFn = (boolean) =>
 {
	emit('_click', boolean)}
    /script>
    style scoped lang="scss">
.dialog {
    	background-color: white;
    	z-index: 999;
    	position: fixed;
    	width: 400px;
    	min-height: 200px;
    	left: 50%;
    	top: 50%;
    	border: 1px solid rgba(0, 0, 0, 0.5);
    	transform: translatex(-50%) translateY(-50%);
    	display: flex;
    	flex-direction: column;
    	justify-content: space-between;
    	padding: 15px;
	h1 {
    		font-Size: 20px;
    		font-weight: 400;
    		padding: 0;
    		margin: 0;
	}
	.btn {
    		display: flex;
    		justify-content: end;
		button {
    			padding: 5px 15px;
    			border-radius: 5px;
    			border: 2px solid #E2E2E2;
    			font-size: 14px;
    			cursor: pointer;
		}
		.success {
    			color: white;
    			background-color: #36AD6A;
    			margin-left: 20px;
		}
	}
}
.background {
    	width: 100vw;
    	height: 100vh;
    	position: fixed;
    	left: 0;
    	// display: none;
    	top: 0;
    	background-color: rgba(0, 0, 0, 0.5);
    	z-index: 99;
}
    /style>
    

到此这篇关于Vue手写dialog组件模态框过程详解的文章就介绍到这了,更多相关Vue dialog组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue dialog模态框的封装方法
• 教你轻松解决Vue Dialog弹窗诟病
• @L_512_2@

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！