使用vue实现点击按钮滑出面板的实现代码
程序员文章站
2023-04-08 08:30:50
在通信的时候容易出错，或者信息根本传不过来。那么这里就示例一下，怎么通过组件之间的通信完成点击事件。
index.vue文件中：
...
在通信的时候容易出错，或者信息根本传不过来。那么这里就示例一下，怎么通过组件之间的通信完成点击事件。
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.js实现联动效果的示例代码