## Vue.extend 也就是用到这个玩意 ## 请求封装的全局loading ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b94a816831784fea80e71631fac52e40~tplv-k3u1fbpfcp-watermark.image?) ### 1.首先是先搞个loading组件 loading.vue ``` ``` ### 2.新建一个load.js ``` 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 //这个是自定义的文案 document.body.appendChild(instance.$el); }, hide() { instance.showToast = false; document.body.removeChild(instance.$el); } } export default { install(Vue) { Vue.prototype.$toast = load } } ``` ### 3.在main.js中引用 ``` import Toast from './utils/load' Vue.use(Toast) ``` ### 4.在组件中使用 ``` getData () {//这里正常应该放到 request封装请求里使用，这里只做个测试 this.$toast.show({ txt: 'fuck...' }) fetch('https://random.dog/woof.json') .then(res => res.json()) .then((res) => { this.$toast.hide() this.url = res.url; }) }, ``` ## 通用弹框组件 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12346cc617904942bd7f4f1370296584~tplv-k3u1fbpfcp-watermark.image?) ### 1. 新建dialog.vue ``` ``` ### 2.新建 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, //自带默认的 ...options, //传入的 } confirmDom.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; ``` ### 3. main.js中引入(也可以不使用插件那边导出这里挂载到原型上) ``` import Dialog from './utils/dialog' Vue.use(Dialog) ``` ### 4.组件中使用 ``` this.$dialog({ title: '你好', msg: '我是一个弹框的内容', // callBack: this.callBack, okButtonTxt: '是', noButtonTxt:'否' }).then(() => { console.log('确认') }).catch((err) => { console.log('取消') }) ``` ## 平时使用的一个小技巧，多人协同开发使用方便require.context ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65a91500f43544feb4c1a05b10e27683~tplv-k3u1fbpfcp-watermark.image?) > 1.首先api文件中是我们的各种请求的函数，多人协作开发时，各自建自己的模块的api，这样联调互相不干扰，不会冲突 > 2.我们最是要把这些请求挂载到vue的原型上，直接在组件中例如`this.$request.getList()` 等... > 在上图中为了避免起名字重名被覆盖，最好在自己负责的模块放到一个对象中类似于 `namespace`的命明空间一样，这样我们的模块就里就可以随意起名字了，类似 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f2ee7fda4de40a89a7e10fe97a12799~tplv-k3u1fbpfcp-watermark.image?) ### 在utils中新建一个 request.js这里是拿到 api文件中的所有请求 > 手动引入太不符合身份,这里动态读取api文件夹中的所有接口 ``` let apiObject = {}; const importAll = r => { r.keys().forEach(key => Object.assign(apiObject, r(key).default)); }; importAll(require.context("../api", false, /\.js$/)); export default { ...apiObject, }; ``` **main.js** ``` import request from "./utils/request"; Vue.prototype.$request = request; ``` **组件中使用** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a045c74b09c49c7b20b5d9ddca26318~tplv-k3u1fbpfcp-watermark.image?) ``` async getDetail(id){ let res=await this.$request.getSignDetail(id); } ``` ### 对于api接口命名可以重名且不覆盖的操作，加入类似 namespace > 下面举个例子，test模块和other模块 #### 1.在apis文件中 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7416c992f6684d538867dac9e923e7fd~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d54202838b9745b9bbfc7bab140255ab~tplv-k3u1fbpfcp-watermark.image?) #### 2.utils 的request的js不变得到的模块内容 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70de39676d07481ab93b1525341a44b0~tplv-k3u1fbpfcp-watermark.image?) #### 3. 在组件中调用 > `this.$request[namespace].xxx`,最好以这种方式调用而不是点出这个模块，这样更能直观的看出你这个接口出自哪个模块，这样模块和模块之间的接口名称就可以重名了 > 如果你非把模块也重名，那我得提一刀了 ``` async getData(){ await this.$request['other'].addCompany(); await this.$request['test'].addCompany(); } ```