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

在vue项目下创建文件dia LOG

实现思路

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

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

index.js文件

import dialog  From  './index.vue'
import { createApp} f rom  '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.ap PE ndChild(div)
}

使用

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

index.vue文件

<template>
	<div class="dialog">
		< h1   v-if =" PR ops._title">{{ props._title }}</h1>
		<div>
			<slot></slot>
		</div>
		<div class=" BT n">
			<button @click="emitFn(false)">取消</button>
			<button @click="emitFn(true)" class="success">确认</button>
		</div>
	</div>
	<div class="background" v -i f="props._background"></div>
</template>
<script setup>
const props =  define Props({
	_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: trans latex (-50%) translateY(-50%);
	dis play : flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 15px;
	h1 {
		font- Size:  20px;
		 font-weight : 400;
		padding: 0;
		m arg in: 0;
	}
	.btn {
		display: flex;
		justify-content: end;
		button {
			padding: 5px 15px;
			border-radius: 5px;
			border: 2px solid  # E2E2E2;
			font -s ize: 14px;
			cursor: pointer;
		}
		.success {
			color: white;
			background-color: #36AD6A;
			mar gin -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组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:@H_ 406 _34@ Vue dialog模态框的封装方法 教你轻松解决Vue Dialog弹窗诟病 Vue实现Dialog封装

总结

以上是 为你收集整理的 Vue手写dialog组件模态框过程详解 全部内容，希望文章能够帮你解决 Vue手写dialog组件模态框过程详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue手写dialog组件模态框过程详解的详细内容...