Comment créer un composant global personnalisé dans Vue ?-js tutoriel-php.cn

Comment créer un composant global personnalisé dans Vue ?

亚连

Libérer： 2018-06-08 18:06:18

original

2461 Les gens l'ont consulté

Cet article présente principalement l'utilisation des composants globaux personnalisés de vue (plug-ins personnalisés). Maintenant, je le partage avec vous et le donne comme référence.

Parfois, lorsque nous faisons du développement, nous souhaitons écrire nous-mêmes un plug-in puis utiliser notre propre plug-in, ce qui nous donne un fort sentiment d'accomplissement. Lorsque les blogueurs ont récemment étudié element-ui et axios, ils ont découvert qu'il s'agissait de composants personnalisés, mais la seule différence est que lorsqu'ils utilisent element-ui, ils utilisent l'instruction Vue.use(), alors qu'en utilisant axios , sans Vue.use( ), il suffit d'importer pour importer. Cela semble très magique. J'ai soigneusement découvert que la différence entre eux est due au fait qu'il n'y a pas de méthode d'installation écrite dans axios, alors que element-ui a cette méthode écrite ci-dessous. propre plug-in.

Tout d'abord, avant d'écrire ce plug-in, générez un répertoire pour stocker le plug-in. En tant que blogueur, je le mets dans le répertoire de chargement d'un composant :

Dans ce répertoire, selon l'habitude du blogueur, j'écris un fichier index.js et un composant . Loading.vue, index.js est écrit sur la méthode d'installation de chargement.vue. Le code est le suivant :

import LoadingComponent from &#39;./Loading.vue&#39;

const Loading={
  install:function (Vue) {
    Vue.component(&#39;Loading&#39;,LoadingComponent)
  }
}
export default Loading

Copier après la connexion

La méthode install est représentée dans main.js Si la méthode Vue.use() est utilisée, la méthode install sera appelée par défaut. Les composants sont également enregistrés dans la méthode d'installation. « Loading » fait ici référence au nom du composant utilisé par App.vue à l'extérieur, et LoadingComponent fait référence à Loading.vue cité ci-dessus. Exportez ensuite via le chargement par défaut d'exportation.

Ensuite, le code Loading.vue ressemble à ceci :

<template>
  <p class="loading-box">
    Loading...
  </p>
</template>
<script></script>

Copier après la connexion

Une fois le code Loading.vue écrit, il est importé dans le fichier main.js par défaut en utilisant Vue.use( ) Méthode pour importer l'index.js qui vient d'être écrit :

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import Loading from &#39;./components/loading&#39;
Vue.use(Loading)
new Vue({
 el: &#39;#app&#39;,
 render: h => h(App)
})

Copier après la connexion

Ensuite, utilisez simplement le modèle dans la méthode App.vue :

<template>
 <p id="app">
  <Loading></Loading>
 </p>
</template>

Copier après la connexion

Vous pouvez également utiliser la méthode de chargement tout à l'heure Écrivez une partie de votre propre code dans le fichier .vue, comme l'écriture d'un plug-in de calendrier, d'un plug-in de bouton, etc. Par exemple, celui-ci :

<template>
  <p class="loader">
    <p class="loader-inner ball-spin-fade-loader">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>
  </p>
</template>
<style scoped>
  .loader{
    width:80px;
    height: 80px;
    margin:50px auto;
  }
  @keyframes ball-spin-fade-loader {
    50% {
      opacity: 0.3;
      -webkit-transform: scale(0.4);
      transform: scale(0.4); }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); } }

  .ball-spin-fade-loader {
    position: relative; }
  .ball-spin-fade-loader > p:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
    animation: ball-spin-fade-loader 1s 0s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
    animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
    animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
    animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
    animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
    animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
    animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
    animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
  .ball-spin-fade-loader > p {
    background-color: #399;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute; }
</style>

Copier après la connexion

L'effet est un cercle roulant :

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas. être utile à tout le monde à l'avenir.