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

<!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>

<div id="app">
<button @click="show=!show">弹</button>
<hr>
<jspang :show="show" @closeparent="cl"></jspang>
</div>

<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>

<script type="text/javascript">
// dialog组件
var jspang = {
props:["show"],
template:`#dialog`,
methods:{
close(){
this.$emit("closeparent");
}
}
}

var app=new Vue({
el:'#app',
data:{
show:false
},
components:{
jspang
},
methods:{
cl(){
this.show = false;
}
}
})

</script>
</body>
</html>

基于Vue的弹框实例的更多相关文章

  1. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

  2. 如何优雅的写一个Vue 的弹框

    写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...

  3. vue自定义弹框

    vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...

  4. vue定时器+弹框 跳到登陆页面

    1.做一个请求拦截,并弹框提示几秒后,跳转到登陆首页或是点击确定之后直接跳转拦截用了this.$axios.interceptors.response页面上的弹框组件用了vux的组件vux地址:htt ...

  5. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  6. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  7. vue移动端弹框组件，vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  8. vue弹框，删除元素

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. .NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

随机推荐

  1. django中的权限控制（form增删改）

    Django默认提供了权限控制,但只能对使用了其自带的登录认证的用户进行权限控制,说白了就是只能对存储在auth_user表中的用户进行权限控制,但不能对未登录过的用户进行权限控制.但如果通过集成LD ...

  2. zabbix 监控wind登录状态

    参考博文:http://blog.51cto.com/qicheng0211/1694583 需求:监控win 2008 的用户登录状态,无论用户登录成功与否都要告警(也可以刷选指定用户.指定时间内) ...

  3. Oracle创建Rman备份专用账户

    有时会因为信息安全需要,创建备份所需的专用账户,不适用sys等用户.可以使用如下方式:create user rman_ycr identified by oracle;grant create se ...

  4. UI（三）

    1. 2.经常用到的loadmap函数 void CTopology::LoadMap() { //m_map.RemoveAllLayers(); AddLayersBasemap(); AddLa ...

  5. 关于Excel中的数据透视表没有数据

    在你想要使用数据透视表的时候,区域一定要正确 然后把你想要的数据按行列排好 如果没有数据 请点击刷新数据……刷新数据……刷新数据 我竟然被这个睿智的问题困扰好久……

  6. Eclipse插件安装方法大全

    1. M2e maven2插件安装 参考地址:http://www.sonatype.com/books/m2eclipse-book/reference/install-sect-marketpla ...

  7. centos 增加网卡

    CentOS 6添加网卡的方法 (2013-11-26 17:19:44) 转载▼ 标签: it 分类: Linux 前段时间安装了1台XEN server虚拟机,之前只用了1个网卡,ip是10.11 ...

  8. debian安装及使用mysql

    在Debian中安装MySQL服务器是很方便的,使用apt-get命令即可完成. debian:~# apt-get install mysql-server mysql-client mysql-s ...

  9. 起床困难综合症 NOI_2014_D1T1

    这道题的正解其实没什么好说的,反而是部分分设计非常巧妙. 之所以要单开一篇是因为当时机房的部分同学刚学位运算,我拿这个题去讲想毒瘤大家一下,于是做了一个挺好看的课件. ppt -> pdf -& ...

  10. hacknet

    网盘下载地址,下载后cmd运行hacknet.exe 链接:https://pan.baidu.com/s/1gTrcuDRzDhepFlXhsOMVlg 提取码:os9v 经过5个小时的战斗,终于通 ...