ホームページ > 記事 > ウェブフロントエンド > vue を使用して、ボタンをクリックしてパネルをスライドさせます。

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

不言オリジナル: 2018-06-29 17:23:293237ブラウズ

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

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

index.vueファイル内:

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

配信仲介者

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

がポップアップするコンポーネントであるコンポーネントを紹介します

import addForm from &#39;./docsForm&#39;
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 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>

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

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

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

関連記事