今回は、Vue コンポーネント開発のスキルと、Vue コンポーネント開発の注意事項をお届けします。実際の事例を見てみましょう。
Vue 単一ファイルコンポーネント開発
vue-cli を使用してプロジェクトを初期化すると、src/components フォルダーに HelloWorld.vue ファイルが見つかります。これは、単一ファイル コンポーネントの基本的な開発モードです。
りー次に、ダイアログ コンポーネントの作成を開始します。
ダイアログ
ターゲットダイアログコンポーネントの基本スタイルは次のとおりです:
ターゲットのスタイルに応じて、次のように要約できます:
ダイアログ コンポーネントには、ポップアップ ウィンドウのタイトルを示す titleprops が必要です
その場合、エンコードは次のようになります:
// 注册
Vue.component('my-component', {
template: '<p>A custom component!</p>'
})
// 创建根实例
new Vue({
el: '#example'
})これでダイアログコンポーネントの開発は完了です。使用方法は以下の通りです。 このとき、v-if または v-show を使用してポップアップ ウィンドウの表示を制御すると、アニメーションが表示されないという問題を発見しました。 ！ ！ 、とても硬そうに見えます。コーチ、アニメーションを追加したいのですが、この時点でトランジションコンポーネントが機能します。トランジションコンポーネントをCSSと組み合わせて使用すると、効果の高いアニメーションを多数作成できます。次に、ダイアログ コンポーネントのアニメーションを強化します。コードは次のとおりです。 トランジションコンポーネントが nameprops を受け取っていることがわかりますが、アニメーションを完成させるために CSS を記述するにはどうすればよいでしょうか?非常に簡単な方法は、2 つの
key クラス (css className) スタイルを記述するだけです:<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>
ElementのMessageBoxの使い方は以下の通りです:<ta-dialog
title="弹窗标题"
@ok="handleOk"
@cancel="handleCancel">
<p>我是内容</p>
</ta-dialog>
次に、そのようなコンポーネントもカプセル化します。まず、考えを整理しましょう:
Elementの使い方はこれ.$confirm これをVueのプロトタイプにぶら下げるだけじゃないでしょうか
考えを整理した後、コーディングを開始しました:
<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>.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);
}
}という 2 つのメソッドを付けました。 そう、確定時とキャンセル時にコールバックが行われるのです。コードに MessageBox を導入する Vue.extend についてもお話したいと思います
新しい MessageBox を直接使用するのではなく、新しい Ctur を使用します。これは、データ (小道具だけでなく) を定義できるためです。例:
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});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 = confirmappendChild のときに非表示にし、次のようなコードを使用します:
onCancel() {
this.visible = false
this.callback && (this.callback.call(this, 'cancel'))
},
onConfirm() {
this.visible = false
this.callback && (this.callback.call(this, 'confirm'))
},このようにアニメーションが表示されます。
まとめ
を継承します (それが適切であるかわかりません。最初にこのように言ってみましょう) そして、このコンストラクターを通じて、コンポーネントの関連属性をカスタマイズできます (使用シナリオ: js がコンポーネントを呼び出します)
https://
github.com/mvpzx/elapse/tree/master/be/src/componentsこの記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
。以上がVue コンポーネント開発のテクニックは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
