Vue组件——弹框组件案例

沐小侠

已于 2022-09-20 17:35:50 修改

阅读量2.9k

点赞数

分类专栏： Vue.js 文章标签： vue javascript 前端

于 2022-04-22 15:48:44 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/124347659

版权

Vue.js 专栏收录该内容

26 篇文章 7 订阅

订阅专栏

页面效果
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件-弹框</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.dialog {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.2);
			}

			.dialog_container {
				background-color: #fff;
				width: 300px;
				height: 150px;
				margin: 100px auto;
				border-radius: 5px;
				padding: 10px;
			}

			.dialog_title>h3 {
				font-weight: 500;
				float: left;
			}

			.dialog_title>span {
				float: right;
				cursor: pointer;
			}

			.dialog_content {
				margin-top: 30px;
			}

			.dialog_content>p {
				text-align: center;
				color: #666;
			}

			.dialog_btn {
				text-align: right;
				margin-top: 30px;
			}

			.dialog_btn>button {
				border: 1px solid #ccc;
				width: 80px;
				height: 30px;
				border-radius: 5px;
			}

			.dialog_btn>button:first-child {
				background-color: #FFFFFF;
				color: #666666;
			}

			.dialog_btn>button:last-child {
				background-color: rgb(64, 158, 255);
				color: #FFFFFF;
			}

			.clearFix::after {
				content: '.';
				height: 0;
				display: block;
				clear: both;
				visibility: hidden;
			}

			/* 过渡样式 */
		</style>
		<!-- 引入 Animate.css 样式 -->
		<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="app">
			<button @click="del">删除</button>

			<m-dialog :show-dialog='showDialog' :msg='msg' @close-dialog='closeDialog'></m-dialog>

		</div>
		<template id="dialog">
			<div class="dialog" v-show="showDialog">
				<transition enter-active-class="animated slideInDown">
					<div class="dialog_container" v-show="showDialog">
						<div class="dialog_title clearFix">
							<h3>提示</h3>
							<span @click="closeDialog">×</span>
						</div>
						<div class="dialog_content">
							<p>{{msg}}</p>
						</div>
						<div class="dialog_btn">
							<button type="button" @click="closeDialog">取消</button>
							<button type="button">确定</button>
						</div>
					</div>
				</transition>
			</div>
		</template>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//注册全局组件
			Vue.component('m-dialog', {
				props: {
					showDialog: {
						type: Boolean,
						default: false
					},
					msg: String
				},
				template: '#dialog',
				methods: {
					closeDialog() {
						this.$emit('close-dialog')
					}
				}
			})
			const vm = new Vue({
				el: '#app',
				data: {
					showDialog: false,
					msg: '这是一段信息'
				},
				methods: {
					del() {
						this.showDialog = true;

					},
					closeDialog() {
						this.showDialog = false;
					}
				}
			});
		</script>
	</body>
</html>

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…

沐小侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue组件——弹框组件案例

页面效果实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>组件-弹框</title> <style> * { margin: 0; padding: 0; } .dialog { position: fixed; top: 0; left: 0; widt
复制链接

扫一扫