使用vue实现点击按钮滑出面板的实现代码
2017-01-10 17:20
871 查看
在通信的时候容易出错,或者信息根本传不过来。那么这里就示例一下,怎么通过组件之间的通信完成点击事件。
index.vue文件中:
<div> <el-button type="primary" @click="onShow">点我</el-button> </div>
传递中介
<addForm :show="formShow" @onHide="formShow = false"></addForm>
引入组件,即是要弹出的组件
import addForm from './docsForm' export default { components: { addForm }, data() { return { show: false, formShow: false } }, watch: { show: { handler: function(newVal, oldVal) { this.show = newVal }, deep: true } }, methods: { onShow() { this.formShow = true } } }
该文件里面的方法就是这样。
然后就是弹出组件docsForm.vue怎样向上传数据
<slidePanel :width="550" :show="show" title="添加知识" @changeShow="hide"> <div class="docs-body"> </div> </slidePanel> export default { props: { show: false }, methods: { hide() { this.$emit('onHide') }, }
在组件slidePanel.vue中
<template> <transition name="slide-panel-fade"> <div v-if="show" class="slide-panel" :style="{ width: width + 'px'}"> <div class="slide-panel-layout"> <div class="slide-panel-header"> <h3 class="slide-panel-header-title">{{title}}</h3> <button class="slide-panel-header-close" @click="onShow"><i class="el-icon-close"></i></button> </div> <div class="slide-panel-body"> <slot></slot> </div> </div> </div> </transition> </template> <script> export default { props: { title: String, show: Boolean, width: { type: Number, default: 500 } }, methods: { onShow() { this.$emit('changeShow', false) } }, watch: { show: { handler: function(newVal, oldVal) { this.show = newVal }, deep: true } }, mounted() { document.body.appendChild(this.$el) }, destroyed() { this.$el.remove() } } </script>
这样就可以实现不同组件之间的册拉弹出。
以上所述是小编给大家介绍的使用vue实现点击按钮滑出面板的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 用vue实现点击按钮,滑出面板(一)
- 用vue实现点击按钮,滑出面板(二)完结版
- 使用jquery实现点击一个按钮或连接,让它下面的div显示,在点击一下隐藏
- VS2010 使用时选择代码或双击时出错,点击窗口按钮后VS自动重启问题
- j2se使用ActionListener实现界面上按钮点击的事件监听操作
- JS实现点击按钮复制指定代码大全
- 用代码实现手工“点击按钮”操作
- 实现点击按钮,弹出登录页面,原页面变暗代码
- Jquery实现点击按钮,连续地向textarea中添加值的实例代码
- 如何使用SendMessage函数实现模拟鼠标点击按钮事件?
- 【Unity快速实现小功能】NGUI篇——快速使用UIEventListener组件实现,按钮点击功能并添加相应的处理函数
- 点击一个按钮实现在不同对话框之间的切换,帮忙看下这代码能不能这样写,为什么不对呀
- 代码实现按钮点击高亮效果
- 使用jquery实现点击按钮弹出层和点击空白处隐藏层
- 使用jquery实现点击按钮弹出层和点击空白处隐藏层
- Jquery 点击按钮自动高亮实现原理及代码
- 使用户点击后退按钮使效三行代码
- 网页设计 页面自动关闭代码(无需使用按钮点击关闭)
- Android点击按钮实现全屏的代码
- 使用ImageSwitcher实现点击按钮浏览图片功能