Verwenden Sie Vue, um das Bedienfeld durch Klicken auf die Schaltfläche herauszuschieben

In diesem Artikel wird hauptsächlich der Implementierungscode für die Verwendung von Vue vorgestellt, um das Klicken auf die Schaltfläche zum Herausschieben des Bedienfelds zu realisieren. Es ist sehr gut und hat Referenzwert.

Es ist einfach bei der Kommunikation Fehler machen oder die Informationen gar nicht vorliegen. Kann nicht weitergegeben werden. Hier ist ein Beispiel dafür, wie Klickereignisse durch Kommunikation zwischen Komponenten abgeschlossen werden.

In der Datei index.vue:

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

Übertragungsvermittler

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

Stellen Sie die Komponente vor, die aufgerufen werden soll

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

Die Methode in dieser Datei ist so.

Dann erfahren Sie, wie Sie Daten in die Popup-Komponente 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 der Komponente 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>

hochladen. Auf diese Weise können Sie das Pop-up realisieren. zwischen verschiedenen Komponenten.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Wie Vue den Effekt der Vorwärtsaktualisierung und Rückwärtsaktualisierung ohne Aktualisierung erzielt

Vue.js 2.0 Mobile Kamera Implementierung der Vorschaufunktion zum Hochladen komprimierter Bilder

Vue-Implementierung der backToTop-Komponente

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue, um das Bedienfeld durch Klicken auf die Schaltfläche herauszuschieben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!