使用vue实现点击按钮滑出面板的实现代码
在通信的时候容易出错，或者信息根本传不过来。那么这里就示例一下，怎么通过组件之间的通信完成点击事件。
index.vue文件中：
<div> <el-buttontype="primary"@click="onShow">点我</el-button> </div>
传递中介
<addForm:show="formShow"@onHide="formShow=false"></addForm>
引入组件，即是要弹出的组件
importaddFormfrom'./docsForm'
exportdefault{
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">
<divclass="docs-body">
</div>
</slidePanel>
exportdefault{
props:{
show:false
},
methods:{
hide(){
this.$emit('onHide')
},
}
在组件slidePanel.vue中
<template>
<transitionname="slide-panel-fade">
<divv-if="show"class="slide-panel":style="{width:width+'px'}">
<divclass="slide-panel-layout">
<divclass="slide-panel-header">
<h3class="slide-panel-header-title">{{title}}</h3>
<buttonclass="slide-panel-header-close"@click="onShow"><iclass="el-icon-close"></i></button>
</div>
<divclass="slide-panel-body">
<slot></slot>
</div>
</div>
</div>
</transition>
</template>
<script>
exportdefault{
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实现点击按钮滑出面板的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！