欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-25 16:33:27
在通信的时候容易出错,或者信息根本传不过来。那么这里就示例一下,怎么通过组件之间的通信完成点击事件。 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实现点击按钮滑出面板的实现代码,希望对大家有所帮助