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

<!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. c基础_笔记_1

    定义变量 int i; 也可以 int i,num; 赋值,c必须先定义变量再赋值 num = 0; 循环for for(i=1; i<=0; i++) { printf("%d \n ...

  2. [翻译] DDExpandableButton

    DDExpandableButton https://github.com/ddebin/DDExpandableButton Purpose - 目的 DDExpandableButton is a ...

  3. javascript Spline代码

    代码是通过网上一个winform代码中提取修改而来的.后转为javascript 版本. /* points = new Array(); points.push({x:1,y:2}); */ fun ...

  4. November 23rd 2016 Week 48th Wednesday

    I always like walking in the rain, so no one can see me crying. 我一直喜欢在雨中行走,那样就没人能看到我的眼泪. I like walk ...

  5. UI（一）

    1.AfxWinMain 首先,MFC程序先执行到TheApp实例化对象也就是通过这句CTestApp the App来实例化对象的然后,调用CTestApp构造函数分配内存空间 然后,就调用了Afx ...

  6. java枚举学习入门

    一.前言  在java编程过程中,我们通常需要定义一些固定数量的常量,在jdk1.5以前,通常的做法是定义一个静态常量类,但自jdk1.5后,java引入了枚举(关键字enum,全称为 enumera ...

  7. Git Hooks、GitLab CI持续集成以及使用Jenkins实现自动化任务

    Git Hooks.GitLab CI持续集成以及使用Jenkins实现自动化任务 前言 在一个共享项目(或者说多人协同开发的项目)的开发过程中,为有效确保团队成员编码风格的统一,确保部署方式的统一, ...

  8. Uva10048 Audiophobia （Floyd）

    题意:有一个无向带权图,求出两点之间路径的最大边权值最小能为多少. 思路:使用floyd算法跑一边以备查询,每一次跑的过程中dp[i][j]=min(dp[i][j],max(dp[i][k],dp[ ...

  9. UVa 1252 - Twenty Questions（状压DP）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  10. python-一个小爬虫，爬取图片

    import re import urllib.request # 爬取网页 def getHtml(url): page=urllib.request.urlopen(url) html=page. ...