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

<!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. Linux优化远程SSH连接

    优化远程SSH连接 1.Linxu和Window的ssh连接区别 Windom默认3389端口,管理员administartor 普通是guest Linux 默认22端口 管理员root 普通一堆 ...

  2. php 实现hash表

    hash表又称散列表,通过把关键字key经过hash函数映射到hash表中某个位置获取记录. 存放记录的数组又称为hash表,映射函数称为hash函数 下面是php中实现hash表的方法 <?p ...

  3. Django在admin模块中显示auto_now_add=True或auto_now=True的时间类型列

    转载自: http://www.tuicool.com/articles/ZryE7f 在Django如果model中的列定义了auto_now_add或auto_now属性,那么这种列不会在admi ...

  4. Ubuntu中文目录文件夹改为英文

    打开终端,在终端中输入命令: export LANG=en_US xdg-user-dirs-gtk-update 在弹出的窗口中询问是否将目录转化为英文路径,同意并关闭. 在终端中输入命令: exp ...

  5. 1191. [HNOI2006]超级英雄【二分图】

    Description 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的 多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确 ...

  6. js 正则验证

    Html 代码如下: <table> <tr> <td>匹配正整数:</td> <td><input type="text& ...

  7. 机器学习中的特征缩放（feature scaling）

    参考:https://blog.csdn.net/iterate7/article/details/78881562 在运用一些机器学习算法的时候不可避免地要对数据进行特征缩放(feature sca ...

  8. linux 修改时间永久

    date -s "20190421 16:36:20" &&hwclock --systohc

  9. Oracle（一）执行计划

    目录 一.什么是执行计划 二.如何查看执行计划 三.如何读懂执行计划 1. 执行顺序的原则 2. 执行计划中字段解释 3. 谓词说明 4. JOIN方式 4.1 HASH JOIN(散列连接) 4.2 ...

  10. Redis（五）主从复制

    本文转载自编程迷思,原文链接 深入学习Redis(3):主从复制 前言 在前面的两篇文章中,分别介绍了Redis的内存模型和Redis的持久化. 在Redis的持久化中曾提到,Redis高可用的方案包 ...