vue を使用して、ボタンをクリックしてパネルをスライドさせます。

この記事では主にvueを使ってボタンをクリックしてパネルからスライドアウトする実装コードを紹介します。非常に優れており、必要な友人は参考にしてください。

コミュニケーション中に間違いを犯しやすいです。 、または情報がまったく送信できません。ここでは、コンポーネント間の通信を通じてクリック イベントを完了する方法の例を示します。

index.vueファイル内:

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

配信仲介者

<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">
<p class="docs-body">
</p>
</slidePanel>
export default {
props: {
show: false
},
methods: {
hide() {
      this.$emit(&#39;onHide&#39;)
    },
}

コンポーネント 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 id="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>

にデータをアップロードする方法です。 このようにして、異なるコンポーネント間のプルアップとポップアップを実現できます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

vue がリフレッシュせずに前方リフレッシュと後方リフレッシュの効果を達成する方法

Vue.js 2.0 モバイル側の写真圧縮画像アップロード プレビュー機能の実装

Vue はトップに戻る backToTop のコンポーネント

以上がvue を使用して、ボタンをクリックしてパネルをスライドさせます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。