欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue自定義全局組件(自定義插件)的用法

有時(shí)候我們?cè)谧鲩_發(fā)的時(shí)候，就想自己寫一個(gè)插件然后就可以使用自己的插件，那種成就感很強(qiáng)。博主最近研究element-ui和axios的時(shí)候，發(fā)現(xiàn)他們是自定義組件，但是唯一有一點(diǎn)不同的是，在用element-ui的時(shí)候是使用Vue.use()語句來使用的，而axios的時(shí)候，不用Vue.use()，只要import就可以導(dǎo)入進(jìn)來了，感覺很神奇，細(xì)細(xì)的發(fā)現(xiàn)，原來他們的不同是因?yàn)閍xios里面并沒有寫install方法，而element-ui就有寫這個(gè)方法，下面就利用這個(gè)install來寫一個(gè)自己的插件。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供武山企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為武山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

首先寫這個(gè)插件之前生成好一個(gè)目錄來存放這個(gè)插件。博主我是將他放在一個(gè)component的loading目錄下：

vue自定義全局組件(自定義插件)的用法

在該目錄下，按博主習(xí)慣是寫一個(gè)index.js文件還有一個(gè)組件loading.vue，index.js里面寫的是關(guān)于loading.vue的install方法。代碼如下所示：

import LoadingComponent from './Loading.vue'

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

其中install方法表示在main.js中，如果使用Vue.use()方法的話，則該方法默認(rèn)會(huì)調(diào)用install方法。在install方法里面還注冊(cè)了組件，這里面'Loading'指的是外面App.vue使用的組件名，LoadingComponent指的是上面引過來的Loading.vue。之后通過export default Loading導(dǎo)出。

然后Loading.vue代碼如下所示：

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

Loading.vue代碼寫完后然后就在默認(rèn)的main.js文件中導(dǎo)入，通過使用Vue.use()方法導(dǎo)入剛剛寫好的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文件里面寫自己的一些代碼，比如寫一個(gè)日歷插件，按鈕插件等等。如下面這個(gè)：

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

效果是一個(gè)滾動(dòng)的圓：

vue自定義全局組件(自定義插件)的用法

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁題目：vue自定義全局組件(自定義插件)的用法
URL網(wǎng)址：http://chinadenli.net/article4/pgphie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站改版、電子商務(wù)、搜索引擎優(yōu)化、網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)