Quelles sont les techniques de développement de composants Vue ?

Cette fois, je vais vous apporter quelques conseils pour le développement de composants Vue, et quelles sont les précautions pour le développement de composants Vue. Voici un cas pratique, jetons un oeil.

Développement de composants à fichier unique Vue

Lorsque vous utilisez vue-cli pour initialiser un projet, vous trouverez un fichier HelloWorld.vue dans le dossier src/components. Il s'agit du mode de développement de base des composants à fichier unique.

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

Ensuite, commencez à écrire un composant de dialogue.

Dialogue

Le style de base du composant de dialogue cible est le suivant :

Selon le style cible, cela peut se résumer :

1. Le composant de dialogue a besoin d'un titleprops pour indiquer le titre de la fenêtre contextuelle

2. Le composant de dialogue doit émettre un événement de confirmation lorsque vous appuyez sur le bouton OK (c'est-à-dire indiquer au composant parent qu'il est confirmé )

3. De même, le composant de dialogue doit émettre un événement d'annulation

4. Le composant de dialogue doit fournir un emplacement pour faciliter le contenu personnalisé

Ensuite, l'encodage est le suivant :

<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>

Ceci termine le développement du composant de dialogue. La méthode d'utilisation est la suivante :

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

. A ce moment, j'ai découvert un problème lors de l'utilisation de v-if ou v-show pour contrôler l'affichage de la fenêtre pop-up, il n'y a pas d'animation ! ! ! , a l'air très raide. Coach, je veux ajouter de l'animation à ce moment-là, la composante de transition entre en jeu. L'utilisation du composant de transition combiné avec CSS peut créer de nombreuses animations avec de bons effets. Ensuite, améliorez l'animation du composant de dialogue. Le code est le suivant :

<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>

Vous pouvez voir que le composant de transition reçoit un nameprops, alors comment écrire du CSS pour terminer l'animation ? Un moyen très simple, il suffit d'écrire deux styles
de classe clé (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);
 }
}

Il est si simple de développer un bon effet d'animation. Notez que le nom du composant de transition est slide-down et que le nom de classe clé de l'animation écrite est slide-down-enter-active et slide-down-leave-active.

Encapsuler la boîte de dialogue et créer MessageBox

L'utilisation de MessageBox d'Element est la suivante :

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

Quand j'ai vu ce code, je me suis senti tellement magique, tellement magique, tellement incroyable (trois fois de suite). Regardez de plus près, ce composant est en fait une boîte de dialogue encapsulée,

Ensuite, j'encapsulerai également un tel composant. Tout d’abord, faisons le tri dans nos pensées :

1. La méthode d'utilisation d'Element est la suivante.$confirm. N'est-ce pas simplement une question de l'accrocher au prototype de Vue

2. Element signifie alors confirmation, catch signifie annuler, et la promesse suffit

Après avoir fait le tri dans mes pensées, j'ai commencé à coder :

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

À ce stade, vous vous demandez peut-être comment rappeler. En fait, j'ai écrit une boîte de dialogue encapsulée et je l'ai nommée MessageBox
Dans son code, il existe deux méthodes :

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

. C'est vrai, les rappels sont effectués lors de la confirmation et de l'annulation. Je veux aussi parler de Vue.extend, qui introduit MessageBox dans le code,

Je n'utilise pas directement new MessageBox mais j'utilise new Ctur, car cela peut définir des données (pas seulement des accessoires), par exemple :

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

Pour le moment, il n'y a actuellement pas de MessageBox sur la page. Nous devons exécuter :

document.body.appendChild(instance.$el)

. Si vous faites cela directement, vous constaterez peut-être qu'il n'y a pas d'animation lorsque la MessageBox est ouverte, mais qu'il y a une animation lorsqu'elle est fermée. La solution est également très simple, rendez-le toujours invisible lorsque
appendChild, puis utilisez un code comme celui-ci :

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

De cette façon, il y aura de l'animation.

Résumé

1. Réalisez de belles animations grâce aux transitions et aux CSS. Parmi eux, le nom du composant de transition détermine les deux classes clés pour l'écriture du CSS, nommées [name]-enter-active et [name]-leave-active

2. Hériter d'un composant via Vue.extend Constructeur (je ne sais pas comment le dire correctement, donc je vais juste le dire comme ça), puis grâce à ce constructeur, vous pouvez personnaliser les attributs associés du composant (scénario d'utilisation : js appelle le composant)

3. Lorsque js appelle un composant, afin de conserver l'effet d'animation du composant, vous pouvez d'abord utiliser document.body.appendChild puis Vue.nextTick(() => instance.visible = vrai)

À ce stade, le développement simple du composant Vue est résumé. Le code pertinent que j'ai écrit se trouve à l'adresse https://github.com/mvpzx/elapse/tree/master/be/src/components<.>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer les paramètres nuls dans la publication dans vue

axios ne peut pas accepter la demande de publication springMVC Comment gérer les paramètres

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!