鸳鸯亭资源网 Design By www.gvabc.com
在通信的时候容易出错,或者信息根本传不过来。那么这里就示例一下,怎么通过组件之间的通信完成点击事件。
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,点击按钮滑出面板
鸳鸯亭资源网 Design By www.gvabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
鸳鸯亭资源网 Design By www.gvabc.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】