vue 사용자 정의 전역 구성 요소(사용자 정의 플러그 인)의 용법

때때로 우 리 는 개발 을 할 때 스스로 플러그 인 을 쓰 고 자신의 플러그 인 을 사용 할 수 있다 고 생각 하 는데 그 성취 감 이 매우 강하 다.블 로 거들 은 최근 element-ui 와 axios 를 연구 할 때 사용자 정의 구성 요 소 를 발견 했다.그러나 유일한 차이 점 은 element-ui 를 사용 할 때 Vue.use()문 구 를 사용 하고 axios 를 사용 할 때 Vue.use()를 사용 하지 않 고 import 만 가 져 올 수 있다 는 것 이다.신기 하고 세밀 하 게 발견 했다.원래 이들 의 차이 점 은 axios 에 인 스타 그램 방법 이 쓰 여 있 지 않 기 때 문 이 었 다.element-ui 는 이 방법 을 썼 다.다음은 이 인 스타 그램 을 이용 하여 자신의 플러그 인 을 썼 다.
우선 이 플러그 인 을 쓰기 전에 이 플러그 인 을 저장 할 디 렉 터 리 를 만 듭 니 다.블 로 거 나 는 그 를 component 의 loading 디 렉 터 리 에 두 었 다.

이 디 렉 터 리 에 서 는 블 로 거 습관 에 따라 index.js 파일 을 쓰 고 구성 요소 loading.vue,index.js 에 loading.vue 에 관 한 install 방법 을 쓰 고 있 습 니 다.코드 는 다음 과 같다.

import LoadingComponent from './Loading.vue'

const Loading={
  install:function (Vue) {
    Vue.component('Loading',LoadingComponent)
  }
}
export default Loading

이 중 인 스타 그램 방법 은 main.js 에서 Vue.use()방법 을 사용 하면 기본적으로 인 스타 그램 방법 을 사용 합 니 다.인 스 톨 방법 에 구성 요소 도 등록 되 어 있 습 니 다.이 안에'Loading'은 밖 에 App.vue 가 사용 하 는 구성 요소 이름 을 말 합 니 다.Loading Component 는 위 에서 가 져 온 Loading.vue 를 말 합 니 다.이후 export default Loading 을 통 해 내 보 냅 니 다.
그리고 Loading.vue 코드 는 다음 과 같 습 니 다.

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

Loading.vue 코드 를 다 쓴 다음 기본 main.js 파일 에서 가 져 옵 니 다.Vue.use()방법 으로 방금 작성 한 index.js 를 가 져 옵 니 다.

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

그리고 App.vue 방법 에서 이 템 플 릿 을 사용 하면 됩 니 다.

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

달력 플러그 인,단추 플러그 인 등 방금 loading.vue 파일 에 자신의 코드 를 쓸 수도 있 습 니 다.아래 와 같이:

<template>
  <div class="loader">
    <div class="loader-inner ball-spin-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</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 > div: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 > div: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 > div: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 > div: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 > div: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 > div: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 > div: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 > div: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 > div {
    background-color: #399;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute; }
</style>

효 과 는 굴 러 가 는 원 입 니 다:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.