Nuxt vue挂载自定义组件/方法

挂载组件

1、创建vue文件（以loading加载为例）

<!--
    * @description       loading 加载
    * @use               <Loading :show='' :content=''/> 或 this.$loading(params)
    * @params            不传时默认 true
    * @params {visible}  是否显示 loading，默认 true
    * @params {text}     加载文案
-->
<template>
    <div class="Loading" v-show="visible">
        <div class="Loading-section">
            <img src="https://static-erp.oss-cn-shenzhen.aliyuncs.com/yfni/test/162926581067369434d.gif" alt="yfn">
            <p>{{text}}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Loading',
    props: {
        show: {
            type: Boolean,
            default: () => {
                return true
            }
        },
        content: [String]
    },
    data() {
        return {
            visible: this.show,
            text: this.content
        }
    },
}
</script>

2、创建插件 plugins -> loading.js

import Vue from 'vue';
import Loading from '/components/Loading'

let instance = null
const loading = {
    install() {
        if(!instance) {
            const ExtendLoading = Vue.extend(Loading)
            instance = new ExtendLoading({
                el: process.client && document.createElement('div')
            })
            process.client && document.body.appendChild(instance.$el)
        }
        instance.visible = false

        const customMethods = (options) => {
            options ?? (options = true)
            if(Object.prototype.toString.call(options).includes('Boolean')) {
                instance.visible = options
            } else {
                instance.visible = options?.visible ?? true
                instance.text = options?.text
            }
        }

        if(!Vue.$loading) {
            Vue.$loading = customMethods
            Vue.prototype.$loading = Vue.$loading
        }
    }
}

Vue.use(loading)

3、注册插件 nuxt.config.js

plugins: [
    ......
    '@/plugins/loading',
  ],

4、使用

<Loading :show='' :content=''/> 或 this.$loading(params)

挂载方法

1、创建插件 plugins -> login.js（以获取token为例）

import Vue from 'vue';

Vue.prototype.$login = (options = {}) => {
    /*
    * @description:         判断是否登录
    * @use:                 this.$login()
    * @options -> hasJump   未登录是否立即跳登录页，默认 true
    */ 
    options.hasJump ?? (options.hasJump = true)
    options.token = (process.client && localStorage.getItem('token')) || ''

    options.hasJump && !options.token && process.client && (location.href = `/login`)

    return !!options.token
}

 

2、注册插件 nuxt.config.js

plugins: [
    ......
    '@/plugins/login',
  ],

3、使用

this.$login()

 在axios内使用

import Vue from 'vue'
import SetHeader from '/utils/set-headers'

const setHeader = new SetHeader()

export default function ({
  app: {
    $axios,
    $cookies
  },
}) {
  let headers = setHeader.getHeaders({
    $axios,
    $cookies
  })

  $axios.defaults.baseURL = process.env.BASE_URL;
  $axios.defaults.timeout = 30000;
  ($axios.defaults.headers = {
    "Content-Type": "application/json;charset=UTF-8",
  }),
  $axios.interceptors.request.use((config) => {
    if(config.method == 'post') {
      if(config.data) {
        let reData = JSON.parse(JSON.stringify(config.data))
        let formData = new FormData();
        Object.keys(reData).forEach(key => {
          formData.append(key, reData[key])
        })
        config.data = formData
      }
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    }
    // 请求头
    Object.keys(headers).forEach(key => {
      config.headers[key] = headers[key]
    })
    // 显示loading
    config.hasLoading && Vue.prototype.$loading()
    return config;
  });
  $axios.interceptors.response.use((response) => {
    // 隐藏loading
    Vue.prototype.$loading(false)
    return response?.data?.result;
  }, (res) => {
    if(res?.response?.status == 401) location.href = `/login.htm`
  });
}