Vue.extend is what we use here

Global loading of request encapsulation

1. Create a loading component loading. Vue

<template> <div class="box" v-if='showToast'> <div class="load"> <img src=".. /assets/test.gif" alt=""> <div class="load_txt">{{txt}}</div> </div> </div> </template> <script> export default { name: 'Loading', data () { return { showToast: true, txt:'Loading' } }, methods: { } } </script> <style scoped> .box { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; /* BACKGROUND: rgba(0, 0, 0, 0.5); */ } .load { width: 180px; height: 180px; position: absolute; top: 50%; left: 50%; margin-top: -90px; transform: translate(-50%); } .load img { width: 100%; } .load_txt{ text-align:center; color:#e4393c } </style>Copy the code

2. Create a load. Js file

import Vue from 'vue' import Loading from '@/components/loading.vue' const loadPlguin = Vue.extend(Loading) let instance  = new loadPlguin({ el: document.createElement('div') }) const load = { show(options) { instance.showToast = true; Instance. TXT = options. TXT / / this is the custom text document. The body. The appendChild (instance. $el); }, hide() { instance.showToast = false; document.body.removeChild(instance.$el); } } export default { install(Vue) { Vue.prototype.$toast = load } }Copy the code

3. Reference it in main.js

import Toast from './utils/load'
Vue.use(Toast)
Copy the code

4. Use it in components

GetData () {this.$toast.show({TXT: 'fuck... ' }) fetch('https://random.dog/woof.json') .then(res => res.json()) .then((res) => { this.$toast.hide() this.url = res.url; })},Copy the code

General purpose frame components

1. The new dialog. Vue

<template> <div id="confirm" v-if='flag'> <div class="contents"> <div class="content-top">{{content.title}}</div> <div class="content-center">{{content.msg}}</div> <div class="content-bottom"> <button type='primary' @click='submit' class="left">{{content.okButtonTxt}}</button> <button type='info' @click='cancle' class="right">{{content.noButtonTxt}}</button> </div> </div> </div> </template> <script> export default { data () { Return {flag: true, content: {title: 'title ', MSG:' this is a popup component ', okButtonTxt: 'ok ', noButtonTxt:' cancel ',}}}, methods: { submit () { this.flag = false; }, cancle () { this.flag = false; }, } } </script> <style scoped> #confirm { position: fixed; left: 0; top: 0; right: 0; bottom: 0; Background: Rgba (0, 0, 0, 0.3); } .contents { width: 250px; height: 180px; border: 1px solid #ccc; border-radius: 10px; background-color: #fff; position: fixed; top: 50%; left: 50%; margin-top: -90px; margin-left: -125px; } .content-top { width: 100%; height: 40px; border-bottom: 1px solid #ccc; text-align: center; font-size: 20px; font-weight: 700; line-height: 40px; } .content-center { width: 90%; height: 80px; margin: 5px auto; } .content-bottom { width: 85%; height: 40px; margin: 0 auto; /* border:1px solid red; */ position: relative; } .left { position: absolute; left: 0; width: 40%; } .right { position: absolute; right: 0; width: 40%; } </style>Copy the code

2. The new dialog. Js

import Vue from 'vue' import Dialog from '@/components/dialog.vue' const DialogPlguin = Vue.extend(Dialog); const confirm = (options) => { return new Promise((resolve, reject) => { let confirmDom = new DialogPlguin({ el: document.createElement('div'), }); document.body.appendChild(confirmDom.$el); confirmDom.content = { ... Confirmdom.content, // comes with default... options, Submit = () => {// if (options.callback && typeof options.callback == 'function') {// resolve() // setTimeout(() => { // confirmDom.flag = false; / /}, 3000); // return false // } resolve() confirmDom.flag = false; } confirmDom.cancle = () => { reject() confirmDom.flag = false; } }) } export default { install(Vue) { Vue.prototype.$dialog = confirm } } // console.log(DialogPlguin) // export default confirm //Vue.prototype.$dialog=Dialog;Copy the code

3. Import from main.js (you can also export it without using the plugin side and mount it to the prototype)

import Dialog from './utils/dialog'
Vue.use(Dialog)
Copy the code

4. Used in components

This.$dialog({title: 'hello ', MSG:' I am a popup ', // callBack: this. CallBack, okButtonTxt: 'is' noButtonTxt:' no '}), then (() = > {the console. The log (' confirmed ')}). The catch ((err) = > {the console. The log (" cancel ")})Copy the code

Require.context is a simple technique to use in collaboration with multiple people

1. First of all, the API file is the function of our various requests. In the collaborative development of multiple people, they will build their own module API, so that the joint adjustment will not interfere with each other and will not conflict

$request. GetList (); this.$request. GetList (); In order to avoid being overwritten with the same name, it is better to put the module you are responsible for into an object similar to the specified space of namespace, so that our module can be arbitrarily named, similar

I’m going to create a new request.js in utils where I’m going to get all the requests in the API file

Manual import is too unidentifiers, it dynamically reads all interfaces in the API folder

let apiObject = {}; const importAll = r => { r.keys().forEach(key => Object.assign(apiObject, r(key).default)); }; importAll(require.context(".. /api", false, /\.js$/)); export default { ... apiObject, };Copy the code

main.js

import request from "./utils/request";
Vue.prototype.$request = request;
Copy the code

Use in components

async getDetail(id){
    let res=await this.$request.getSignDetail(id);
}
Copy the code