使用vue实现点击按钮滑出面板的实现代码

2019-11-19 18:01:32

字体：大中小

来源：转载

供稿：网友

在通信的时候容易出错，或者信息根本传不过来。那么这里就示例一下，怎么通过组件之间的通信完成点击事件。

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实现点击按钮滑出面板的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：JavaScript BASE64算法实现(完美解决中文乱码)

下一篇：Mac下使用charles遇到的问题以及解决办法