Use vue to slide out the panel by clicking the button

This article mainly introduces the implementation code of using vue to realize clicking a button to slide out of the panel. It is very good and has reference value. Friends who need it can refer to it

It is easy to make mistakes during communication, or the information is not at all Can't pass. So here is an example of how to complete click events through communication between components.

In the index.vue file:

<p>
   <el-button type="primary" @click="onShow">点我</el-button>
</p>

Transfer intermediary

<addForm :show="formShow" @onHide="formShow = false"></addForm>

Introducing the component, which is the component to be popped up

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
    }
}
}

The method in this file is so.

Then is how to upload data to the pop-up component docsForm.vue

<slidePanel :width="550" :show="show" title="添加知识" @changeShow="hide">
<p class="docs-body">
</p>
</slidePanel>
export default {
props: {
show: false
},
methods: {
hide() {
      this.$emit(&#39;onHide&#39;)
    },
}

In the component slidePanel.vue

<template>
  <transition name="slide-panel-fade">
    <p v-if="show" class="slide-panel" :style="{ width: width + &#39;px&#39;}">
      <p class="slide-panel-layout">
        <p 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>
        </p>
        <p class="slide-panel-body">
          <slot></slot>
        </p>
      </p>
    </p>
  </transition>
</template>
<script>
export default {
  props: {
    title: String,
    show: Boolean,
    width: {
      type: Number,
      default: 500
    }
  },
  methods: {
    onShow() {
      this.$emit(&#39;changeShow&#39;, false)
    }
  },
  watch: {
    show: {
      handler: function(newVal, oldVal) {
        this.show = newVal
      },
      deep: true
    }
  },
  mounted() {
    document.body.appendChild(this.$el)
  },
  destroyed() {
    this.$el.remove()
  }
}
</script>

This way you can realize the pop-up between different components.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How vue achieves the effect of forward refresh and backward without refresh

Vue.js 2.0 mobile camera Implementation of the compressed image upload preview function

Vue implementation of the component that returns the top backToTop

The above is the detailed content of Use vue to slide out the panel by clicking the button. For more information, please follow other related articles on the PHP Chinese website!