Vue コンポーネントの開発スキルの概要

今回は、Vue コンポーネントの開発スキルについてまとめてみました。Vue コンポーネント開発における 注意点 について、実際の事例を見てみましょう。

まえがき

卒業が近づいてきたので、簡単な個人ブログを書きました。プロジェクトのアドレスはここをクリックしてください (ちなみに、スターを付けてください)。次に、Element のダイアログ ボックスとポップアップ コンポーネントのロープロファイル バージョンを段階的に模倣します。

Text

Vue 単一ファイル コンポーネント開発

vue-cli を使用してプロジェクトを初期化すると、src/components フォルダーに HelloWorld.vue ファイルが見つかります。これが単一ファイルの基本的な開発モデルです。コンポーネント。

// 注册
Vue.component('my-component', {
 template: '<p>A custom component!</p>'
})
// 创建根实例
new Vue({
 el: '#example'
})

次に、ダイアログ コンポーネントの作成を開始します。

Dialog

ターゲットダイアログコンポーネントの基本スタイルは、図に示すとおりです:

ターゲットスタイルによれば、次のように結論付けることができます:

1. dialogコンポーネントには、次のことを示すtitlepropsが必要です。ポップアップ ウィンドウのタイトル

2. dialog コンポーネント OK ボタンが押されたときに、OK イベント を発行する必要があります (つまり、親コンポーネントに OK であることを伝えるため)

3. 同様に、dialog コンポーネントキャンセルイベントを発行する必要があります

4. ダイアログコンポーネントは、簡単にカスタマイズできるようにスロットを提供する必要がありますコンテンツ

そして、コーディングは次のようになります:

<template>
 <p class="ta-dialogwrapper">
 <p class="ta-dialog">
  <p class="ta-dialogheader">
  <span>{{ title }}</span>
  <i class="ios-close-empty" @click="handleCancel()"></i>
  </p>
  <p class="ta-dialogbody">
  <slot></slot>
  </p>
  <p class="ta-dialogfooter">
  <button @click="handleCancel()">取消</button>
  <button @click="handleOk()">确定</button>
  </p>
 </p>
 </p>
</template>
<script>
export default {
 name: 'Dialog',
 props: {
 title: {
  type: String,
  default: '标题'
 },
 },
 methods: {
 handleCancel() {
  this.$emit('cancel')
 },
 handleOk() {
  this.$emit('ok')
 },
 },
}
</script>

これで、ダイアログコンポーネントの開発は完了します。使用方法は以下の通りです

<ta-dialog 
 title="弹窗标题" 
 @ok="handleOk" 
 @cancel="handleCancel">
 <p>我是内容</p>
</ta-dialog>

この時、問題が発見され、v-ifやv-showを使ってポップアップウィンドウの表示を制御しているのですが、アニメーションが無い！ ！ ！ 、とても硬そうに見えます。コーチ、アニメーションを追加したいのですが、この時点でトランジションコンポーネントが機能します。トランジションコンポーネントをCSSと組み合わせて使用​​すると、効果の高いアニメーションを多数作成できます。次に、ダイアログ コンポーネントのアニメーションを強化します。コードは次のとおりです。

<template>
 <transition name="slide-down">
 <p class="ta-dialogwrapper" v-if="isShow">
  // 省略
 </p>
 </transition>
</template>
<script>
export default {
 data() {
 return {
  isShow: true
 }
 },
 methods: {
 handleCancel() {
  this.isShow = false
  this.$emit('cancel')
 },
 handleOk() {
  this.isShow = true
  this.$emit('ok')
 },
 },
}
</script>

トランジション コンポーネントが nameprops を受け取ることがわかります。それでは、アニメーションを完成させるための CSS をどのように記述するか?非常に簡単な方法で、次の 2 つの

キー クラス (CSS className) スタイルを記述するだけです:

.slide-down-enter-active {
 animation: dialog-enter ease .3s;
}
.slide-down-leave-active {
 animation: dialog-leave ease .5s;
}
@keyframes dialog-enter {
 from {
 opacity: 0;
 transform: translateY(-20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
@keyframes dialog-leave {
 from {
 opacity: 1;
 transform: translateY(0);
 }
 to {
 opacity: 0;
 transform: translateY(-20px);
 }
}

優れた動的効果を開発するのは非常に簡単です。トランジション コンポーネントの名前がスライドダウンされ、次のキー クラス名を記述することに注意してください。アニメーションは、スライドダウンしてアクティブになると、スライドダウンしてアクティブのままになります。

ダイアログをカプセル化してメッセージボックスを作成します

要素のメッセージボックスは次のように使用されます:

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
}).then(() => {
 this.$message({
 type: 'success',
 message: '删除成功!'
 });
}).catch(() => {
 this.$message({
 type: 'info',
 message: '已取消删除'
 });   
});

このコードを見たとき、とても魔法のような、とても魔法のような、とても魔法のような気分になりました(3回連続の驚き)。よく見てみると、このコンポーネントは実際にはカプセル化されたダイアログです。

次に、そのようなコンポーネントもカプセル化します。まず考えを整理します:

1. Elementの使用方法は、これをVueのプロトタイプにぶら下げるだけではないでしょうか?

2. Elementのthenは確認、catchはキャンセルを意味します。そして約束で十分です

自分の考えを整理した後、コーディングを開始しました:

import Vue from 'vue'
import MessgaeBox from './src/index'
const Ctur = Vue.extend(MessgaeBox)
let instance = null
const callback = action => {
 if (action === 'confirm') {
 if (instance.showInput) {
  instance.resolve({ value: instance.inputValue, action })
 } else {
  instance.resolve(action)
 }
 } else {
 instance.reject(action)
 }
 instance = null
}
const showMessageBox = (tip, title, opts) => new Promise((resolve, reject) => {
 const propsData = { tip, title, ...opts }
 instance = new Ctur({ propsData }).$mount()
 instance.reject = reject
 instance.resolve = resolve
 instance.callback = callback
 document.body.appendChild(instance.$el)
})
const confirm = (tip, title, opts) => showMessageBox(tip, title, opts)
Vue.prototype.$confirm = confirm

この時点で、どうやってコールバックするか疑問に思っているかもしれません。実際、私はカプセル化されたダイアログを作成し、その中に MessageBox という名前を付けました。コードには 2 つのメソッドがあります:

onCancel() {
 this.visible = false
 this.callback && (this.callback.call(this, 'cancel'))
},
onConfirm() {
 this.visible = false
 this.callback && (this.callback.call(this, 'confirm'))
},

はい、確認時とキャンセル時にコールバックするためです。 Vue.extend についてもお話したいと思います。

新しい MessageBox を直接使用するのではなく、新しい Ctur を使用します。これは、たとえば、

instance = new Ctur({ propsData }).$mount()

At のようにデータを定義できるためです。実際には、このページにはまだメッセージ ボックスがありません。

document.body.appendChild(instance.$el)

これを直接実行すると、メッセージ ボックスが開いたときにはアニメーションが表示されないかもしれませんが、閉じられたときにはアニメーションが表示されます。 。解決策も非常に簡単です。

appendChild を非表示にし、次のようなコードを使用します。

Vue.nextTick(() => instance.visible = true)

このようにすると、アニメーションが表示されます。

概要

トランジションとCSSを通じて優れたアニメーションを実現します。その中で、遷移コンポーネントの名前によって、[name]-enter-active と [name]-leave-active という名前の CSS を記述するための 2 つの主要なクラスが決まります

2. Vue.extend を介してコンポーネントの コンストラクター を継承し (適切な言い方がわからないので、このように言います)、このコンストラクターを通じて、関連する属性をカスタマイズできますコンポーネントの呼び出し (使用シナリオ: js がコンポーネントを呼び出します)

3. js コンポーネントを呼び出すとき、コンポーネントのアニメーション効果を維持するために、最初に document.body.appendChild を使用し、次に Vue.nextTick(() を使用できます。 =>instance.visible = true)

これが簡単な Vue コンポーネントです。私が書いた関連コードは、https://github.com/mvpzx/elapse/ にまとめられています。 Tree/master/be/src/components

この記事の事例などを読んだ後は、この方法を習得したと思います。とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Vueレンダリングとプラグイン読み込みの操作順序

Node.jsによるDoubanデータのクローリング例

以上がVue コンポーネントの開発スキルの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。