vue.js 利用组件之间通讯，写一个弹出框例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="toggleShow">弹出</button> <modal :show="isShow" @clone="fn">
<h1 slot="title">你确定删除吗？</h1>
</modal>
</div>
<template id="modal">
<transition name="fade">
<div v-show="show">
<div id="mask" @click="conse"></div>
<div class="modal">
<button @click="conse" class="clone">关闭</button>
<slot name="title">ok成功！</slot>
</div>
</div>
</transition>
</template>
</body>
<style>
#mask{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,0.5);
}
.modal{
width:400px;
height:400px;
position: absolute;
z-index: 100;
left:50%;
top:50%;
background: #ffffff;
transform: translate3d(-50%,-50%,0)
}
.clone{
position: absolute;
right:10px;
top:10px;
}
/* 进入开始 */
.fade-enter{
opacity: 0;
}
/* 开始过渡阶段,动画出去阶段 */
.fade-enter-active{
transition: all 1s ease-out;
} /* 出去终点 */
.fade-leave-active{
transition: all 1s ease-out;
opacity: 0;
}
</style>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let modal={
template:'#modal',
props:{
show:{
type:Boolean
}
},
methods:{
conse(){
this.$emit('clone',false);
}
}
};
let vm=new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
fn(data){
this.isShow=data;
},
toggleShow(){
this.isShow=true;
}
},
components:{
modal
}
})
</script>
</html>
vue.js 利用组件之间通讯，写一个弹出框例子的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- 仿腾讯微博的一个弹出框 v0.1 beta
仿腾讯微博的一个弹出框 v0.1 beta 代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...
- js特效-仿照html属性title写一个弹出标题样式
问题场景:商品描述,当营业员给客户介绍时会看着这些弹出标题来给客户讲解描述,一般采用html中属性title来实现,但是有些商品描述太长,这些title在IE浏览器中大约展示5s,营业员需要多次移动鼠 ...
- [ vue ] Quasar封装q-dialog组件，在外层实现弹出框的开启和关闭
场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...
- Android 如何利用Activity的Dialog风格完成弹出框设计
在我们使用Dialog时,如果需要用到很多自己设计的控件,虽然可以让弹出框显示出我们需要的界面,但却无法找到地方完成控制代码的编写,如何解决这个问题呢,我们可以将Activity伪装成Dialog弹出 ...
- Bootstrap方法为页面添加一个弹出框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- android中怎么把自己须要的app启动图标集中到一个弹出框中
先看效果图 这个是我们自己的apk点击之后的效果 下边是布局文件 activity_main.xml主布局文件 <LinearLayout xmlns:android="http:// ...
随机推荐
- bzoj 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富【记忆化搜索+剪枝】
c[x][y]为从(x,y)到(n,m)的最大值,记忆化一下 有个剪枝是因为y只能+1所以当n-x>m-y时就算x也一直+1也是走不到(n,m)的,直接返回0即可 #include<ios ...
- [SDOI2010]外星千足虫（高斯消元）
高斯消元裸题... 方法一:暴力,O(2^n)20分 方法二:直接Gauss,加点玄学技巧搞得好的话70分 方法三:使用bitset优化,复杂度:$O(\frac{n^3}{ω})$ 不会的同学看一下 ...
- ADSI和其他内容
ADSI (Active Directory Services Interface)是Microsoft推出的一项技术,它统一了许多底层服务的编程接口,程序员可以使用一致的对象技术来访问这些底层服务. ...
- Poj 1236 Network of Schools (Tarjan)
题目链接: Poj 1236 Network of Schools 题目描述: 有n个学校,学校之间有一些单向的用来发射无线电的线路,当一个学校得到网络可以通过线路向其他学校传输网络,1:至少分配几个 ...
- kafka_2.11-0.8.2.2.tgz的3节点集群的下载、安装和配置（图文详解）
kafka_2.10-0.8.1.1.tgz的1或3节点集群的下载.安装和配置(图文详细教程)绝对干货 一.安装前准备 1.1 示例机器 二. JDK7 安装 1.1 下载地址 下载地址: http: ...
- 【ZT】在微信上有哪些高情商的说话方式 | M周刊（听语音需要60秒，看文字只需10秒）
https://baijiahao.baidu.com/s?id=1590547145580792217&wfr=spider&for=pc https://yuedu.baidu.c ...
- python 关于一个懒惰和非懒惰的
>>> pa = re.compile(r'<.*>') >>> result = pa.findall('<H1>title</H1 ...
- React组件的防呆机制（propTypes）
Prop验证 随着应用不断变大,为了保证组件被正确使用变得越来越重要.为此我们引入propsTypes.React.PropTypes提供很多验证器(valodator)来验证传入的数据的有效性.当向 ...
- Python基础语法（转）
作者:Peter 出处:http://www.cnblogs.com/Peter-Zhang/ Python 基础语法(一) Python的特点 1. 简单 Python是一种代表简单思想的语言. ...
- 【C++】智能指针简述(五):解决循环引用的weak_ptr
总结一下前文内容: 1.智能指针通过RAII方法来管理指针:构造对象时,完成资源初始化;析构对象时,对资源进行清理及汕尾. 2.auto_ptr,通过“转移所有权”来防止析构一块内存多次.(如何转移? ...