基于Vue的弹框实例
看到博客的人，请养成写博客的习惯，不会不会，就怕曾经会过，现在想不起来了，一起加油.................... 让学习真的成为一种习惯，同时要注意身体
<!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的弹框实例的更多相关文章
- 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」
uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...
- 如何优雅的写一个Vue 的弹框
写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...
- vue自定义弹框
vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...
- vue定时器+弹框 跳到登陆页面
1.做一个请求拦截,并弹框提示几秒后,跳转到登陆首页或是点击确定之后直接跳转拦截用了this.$axios.interceptors.response页面上的弹框组件用了vux的组件vux地址:htt ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- vue移动端弹框组件，vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- vue弹框，删除元素
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- .NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框
.NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...
随机推荐
- C 转义字符说明
%a(%A) 浮点数.十六进制数字和p-(P-)记数法(C99)%c 字符%d 有符号十进制整数%f 浮点数(包括float和doulbe)%e(%E) 浮点数指数输出[e-(E-)记数法]%g(%G ...
- SparkSql实现Mysql到hive的数据流动
今天去面试了一波,因为调度系统采用了SparkSql实现数据从Mysql到hive,在这一点上面试官很明显很不满我对于Spark的理解,19年的第一个面试就这么挂了. 有问题不怕,怕的是知道了问题还得 ...
- Sublime Text3 使用总结
一.简介: Sublime Text 3是一款强大而精巧的文本编辑器 [点击下载].它的界面友好.功能非凡.性能极佳可令代码高亮.语法提示.自动完成更重要的是,它支持众多插件扩展——锦上添花.强之又强 ...
- JS DateTime 格式化
首先看我们在浏览器接收到的DateTime格式的数据: 如果没有在传输的时候把DateTime转成字符串的话,我们只需要在JS中加一段代码即可转换,代码如下: function ChangeDateF ...
- jiekou
接口 新的接口 package cn.eangaie.jingdong.controller; import cn.eangaie.jingdong.entity.Result; import c ...
- like a virgin
like a virgin 编辑 <Like a Virgin>是美国歌手麦当娜·西科尼的第二张个人专辑,已于1984年11月12日由华纳唱片旗下发行. 1985年,Like a Virg ...
- 原生JavaScript可以干那些事情
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
- spark搭建部署
基础环境准备 安装JDK1.8+,并设置环境变量 搭建zookeeper集群 搭建Hadoop集群 Spark local模式 上传编译完成的spark安装程序到服务器上,并解压到指定目录 [root ...
- PHP设计模式系列 - 建造者模式
什么是建造者模式 建造者模式主要是为了消除其它对象复杂的创建过程. 设计场景 有一个用户的UserInfo类,创建这个类,需要创建用户的姓名,年龄,金钱等信息,才能获得用户具体的信息结果. 创建一个U ...
- 通过 Chrome 调试运行在 IOS-safari 上的页面
本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safari 浏览器中的网页.如果你有一台 iMac/MacBook,可忽略该文档.iMac 环境下,直接通 ...