Vue コンポーネントの開発スキルの概要-H5 チュートリアル-php.cn

今回は、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

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

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

dialogコンポーネントには、次のことを示すtitlepropsが必要です。ポップアップウィンドウのタイトル
dialog コンポーネント OK ボタンが押されたときに、OK イベントを発行する必要があります (つまり、親コンポーネントに OK であることを伝えるため)
同様に、dialog コンポーネントキャンセルイベントを発行する必要があります
ダイアログコンポーネントは、簡単にカスタマイズできるようにスロットを提供する必要がありますコンテンツ

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

<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回連続の驚き)。よく見てみると、このコンポーネントは実際にはカプセル化されたダイアログです。

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

Elementの使用方法は、これをVueのプロトタイプにぶら下げるだけではないでしょうか?
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)

ログイン後にコピー

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

概要

Vue.extend を介してコンポーネントのコンストラクターを継承し (適切な言い方がわからないので、このように言います)、このコンストラクターを通じて、関連する属性をカスタマイズできますコンポーネントの呼び出し (使用シナリオ: js がコンポーネントを呼び出します)
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 サイトの他の関連記事を参照してください。