基于Vue的弹框实例

最新推荐文章于 2024-07-01 08:00:00 发布

转载最新推荐文章于 2024-07-01 08:00:00 发布 · 410 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leigepython/p/10738150.html

文章标签：

#javascript #ViewUI

看到博客的人，请养成写博客的习惯，不会不会，就怕曾经会过，现在想不起来了，一起加油.................... 让学习真的成为一种习惯，同时要注意身体

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue.min.js"></script>
<title>Slot content extend Demo</title>
<style type="text/css">
.mask{
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
position: fixed;
left:0;
top:0;
}

.mask .content{
position: fixed;
width: 400px;
height: 400px;
background: #fff;
color:#fff;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}

</style>
</head>
<body>

<template id="dialog">
<div v-if="show" class="mask">
<h1>标题的内容</h1>
<div class="content">
<button @click="close">x</button>
<span style="color:ccc">xxxxx&creat;</span>
</div>
</div>
</template>