Vue弾窓アセンブリの実現

弾窓アセンブリには次の内容が含まれています.

弾窓マスク層

コンテンツ層の実装(slot、props、$on、$emitを含む)

.
実装手順:

はコンポーネントUIスタイルを構築し、HTML、cssはマスク層、コンテンツ領域

を実現する.

弾窓コンテンツの作成:コンポーネントslotスロットを介して親コンポーネントから伝達された弾窓コンテンツ

を受信する.

コンポーネントスイッチの実装:親コンポーネントによって伝達されたprops制御コンポーネントの表示と非表示、サブコンポーネントが閉じたときにイベント$emitによって親コンポーネントの状態値の変更をトリガする.

コンポーネントコード実装

<template>
	<div class="modal-bg" v-show="show">
		<div class="modal-container">
			<div class="modal-header">
				{{title}}
			</div>
			<div class="modal-main">
				<!-- 
					        ，             
					<slot name="main"></slot>
				 -->
				<slot></slot>
			</div>
			<div class="modal-footer">
				<button @click="close">   </button>
				<button @click="submit">   </button>
			</div>
		</div>
	</div>
</template>
<script>
export default{
	name: 'modal',
	data() {
		return {}	
	},
	props: {
		show: {    //       
			type: Boolean,
			default: false,	
			required: true,   //    
		},
		title: {
			type: String,
			default: 'title',
		}
	},
	methods: {
		//        $emit         ，        
		close() {
			this.$emit("hideModal");	
		},
		submit() {
			this.$emit("submit");	
		}
	}
}
</script>
<style>
.modal-bg{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, .4);
	z-index:999;
}
.modal-container{
	border-radius: 8px;
	background: #fff;
}
.model-header{
	heigth: 60px;
	background: blue;
	color:#fff;
}
.modal-main {
	padding: 20px 40px;
}
.modal-footer{
	height: 60px;
	display: flex;
	justify-content: center;
	align-item: center;
	border-top: 1px solid #000;
}
.modal-footer button{
	width:100px;
}
</style>

親コンポーネントからの呼び出し:

<template>
	<div>
		<Modal :show="show" :title="title" @hideModal="hideModal" @submit="submit">
			<!-- 
				  slot          
				    ： <div slot="main">           </div>
			-->
			<div>  slot    </div>
		</Modal>
	</div>
</template>
<script>
import Modal from "./modal.vue";
export default {
	name: "parentVue",
	data() {
		return {
			show: false,
			title: "      ",
		}	
	},
	components: {
		Modal,
	},
	methods: {
		//     
		hideModal() {
			this.show = false;
		}
		//     
		submit() {
			this.show = true;	
		}
	}
}
</script>
<style>

</style>

ヒント:現在の市場では、Element-UIなどの既存のUIコンポーネントライブラリが多く、UIスタイルコードなどの操作を直接作成することは少なく、サードパーティ製ライブラリを直接使用してプロジェクトのニーズを達成することができます.