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

<!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. REST Framework组件的解析源码

    首先我们要知道解析器的作用 解析器就是对你请求体中的数据进行反序列化.封装 把你的所有的请求数据都封装在request.data中 以后就在request.data中获取数据 我们先导入rest_fr ...

  2. 生成器（generator），迭代器（yield）

    g=(i for i in range(10)) #小括号表示生成一个迭代生成器.[]是列表生成器 g.__next__() yield将一个函数变成生成器 import time def f(): ...

  3. python2.7下同步华为云照片的爬虫程序实现

    1.背景 随着华为手机的销量加大,华为云的捆绑服务使用量也越来越广泛,华为云支持自动同步照片.通讯录.记事本等,用着确实也挺方便的,云服务带来方便的同时,也带来了数据管理风险.华为目前只提供一个www ...

  4. saltstack-把执行结果存储到mysql服务内

    saltstack把执行的结果保存到mysql中,以便进行命令安全审计 mysql负责存储数据,mysql-python负责收集数据 master需要安装mysql和MySQL-python,mini ...

  5. 设计一套砝码要求能称量出1 ~ 100g之间的任意重量，请问至少需要多少个砝码？以及每个砝码各自的重量是多少？

    解析: 1g => 1g 2g => 1g 1g => 1 ~ 2g之间的重量 => 1g 2g => 1 ~ 3g之间的重量 4g => 1g 2g 1g =&g ...

  6. Python运算符之三元运算符

    三元运算符:也称之为条件表达式 [条件为真的结果] if 条件 else [条件为假的结果] 如: ium01 = 100 if100 > 200 else200 print(num01) #三 ...

  7. 字节(byte)与位(bit)基础回顾

    预估方式:一个uid,String类型,最长约50字节,即50Byte,一天100亿PV,则100亿*50Byte,约500G容量存ES中或Hbase中,无法存日志文件中,一个docker磁盘才50G ...

  8. easyui 对form扩展

    功能描述 easyui 中  combobox 多选赋值方法如下: $('#cbx').combobox('setValues', ['01','02']) 然而,业务中是以  “01,02” 的形式 ...

  9. 20165318 2017-2018-2 《Java程序设计》第二周学习总结

    20165318 2017-2018-2 <Java程序设计>第二周学习总结 教材学习内容总结 本周学习了第二章和第三章的内容,掌握了Java中基本数据类型.数组.运算符.表达式和语句等方 ...

  10. Java基础加强之并发（二）常用的多线程实现方式

    概述 常用的多线程实现方式有2种: 1. 继承Thread类 2. 实现Runnable接口 之所以说是常用的,是因为通过还可以通过JUC(java.util.concurrent)包中的线程池来实现 ...