Utilisez vue pour faire glisser le panneau en cliquant sur le bouton

Cet article présente principalement le code d'implémentation de l'utilisation de vue pour réaliser en cliquant sur le bouton pour faire glisser le panneau. C'est très bien et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

C'est facile. faire des erreurs lors de la communication, ou l'information n'est pas du tout impossible à transmettre. Voici donc un exemple de la façon de réaliser des événements de clic via la communication entre les composants.

Dans le fichier index.vue :

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

Intermédiaire de transfert

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

Présentation du composant, qui est le composant à faire apparaître

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

C'est la méthode dans ce fichier.

Ensuite, il y a comment télécharger des données vers le composant pop-up 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;)
    },
}

Dans le composant 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>

De cette façon, vous pouvez réaliser la communication entre les différents composants Le volume apparaît.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment vue obtient l'effet d'actualisation avant et arrière sans actualisation

Vue.js 2.0 mobile camera Implémentation de la fonction de prévisualisation du téléchargement d'images compressées

Implémentation Vue du composant backToTop

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!