vnues · jkingfirst · Sep 27, 2022 · Sep 27, 2022 · Sep 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
diff --git a/README.md b/README.md
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/app'
+ ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "vue-test1",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "ant-design-vue": "^1.7.2",
+ "vue": "^2.6.6",
+ "vue-router": "^3.0.2"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "^3.5.0",
+ "@vue/cli-plugin-eslint": "^3.5.0",
+ "@vue/cli-service": "^3.5.0",
+ "babel-eslint": "^10.0.1",
+ "eslint": "^5.8.0",
+ "eslint-plugin-vue": "^5.0.0",
+ "vue-template-compiler": "^2.5.21"
+ },
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/essential",
+ "eslint:recommended"
+ ],
+ "rules": {},
+ "parserOptions": {
+ "parser": "babel-eslint"
+ }
+ },
+ "postcss": {
+ "plugins": {
+ "autoprefixer": {}
+ }
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not ie <= 8"
+ ],
+ "standard": {
+ "ignore": "*"
+ }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but vue-test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,16 @@
+<template>
+ <div id="app">
+ <router-view></router-view>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'app'
+}
+</script>
+<style>
+html, body {
+ margin: 0;
+}
+</style>
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,10 @@
+import apiMock from './apiMock'
+
+// 实际开发中，接口的数据定义和返回肯定是不一样的
+// 这里只是为了更形象地模拟多个接口
+export const api1 = name => apiMock(name)
+export const api2 = name => apiMock(name)
+export const api3 = name => apiMock(name)
+export const api4 = name => apiMock(name)
+export const api5 = name => apiMock(name)
+export const api6 = name => apiMock(name)
diff --git a/src/apiMock.js b/src/apiMock.js
@@ -0,0 +1,11 @@
+export default item => {
+ return new Promise(resolve => {
+ // 通过 setTimeout模拟接口的异步请求
+ setTimeout(() => {
+ resolve({
+ backShow: true,
+ item
+ })
+ }, Math.random() * 3000)
+ })
+}
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/modalIndex/ModalControl.js b/src/components/modalIndex/ModalControl.js
@@ -0,0 +1,83 @@
+/* eslint-disable no-console */
+/* eslint-disable no-unused-vars */
+import modalMap from './modalConfig'
+
+const getAllModalList = mapObj => {
+ let currentList = []
+ if (mapObj.modalList) {
+ currentList = currentList.concat(
+ mapObj.modalList.reduce((t, c) => t.concat(c.id), [])
+ )
+ }
+ if (mapObj.children) {
+ currentList = currentList.concat(
+ Object.values(mapObj.children).reduce((t, c) => {
+ return t.concat(getAllModalList(c))
+ }, [])
+ )
+ }
+ return currentList
+}
+
+class ModalControl {
+ constructor (type) {
+ this.type = type // 页面
+ this.modalFlatMap = {} // 收集所有弹框
+ this.clientList = {} // callback队列
+ this.showModalList = [] // 要展示弹框队列
+ this.highestLevelModal = {} // 最高层级弹框
+ this.modalList = getAllModalList(modalMap[this.type])
+ }
+ on(modalName,fn){
+ if(!this.clientList[modalName]){
+ this.clientList[modalName] = []
+ }
+ this.clientList[modalName].push(fn)
+ this.preCheck()
+ }
+ emit () {
+ let key = Array.prototype.shift.call(arguments)
+ if(!this.clientList[key]){
+ return false
+ }
+ for (let i = 0;i<this.clientList[key].length; i++) {
+ let fn = this.clientList[key][i]
+ fn.apply(this,arguments)
+ }
+ }
+ add (modalItem, infoObj) {
+ this.modalFlatMap[modalItem.name] = {
+ id: modalItem.id,
+ level: modalItem.level,
+ frontShow: modalItem.frontShow,
+ backShow: infoObj.backShow,
+ handler: infoObj.handler
+ }
+ this.preCheck()
+ }
+
+ preCheck () {
+ if (this.modalList.length === Object.values(this.modalFlatMap).length) {
+ this.notify()
+ }
+ }
+
+ notify () {
+ const highLevelModal = Object.values(this.modalFlatMap).filter(item => item.backShow && item.frontShow).reduce((t, c) => {
+ return c.level > t.level ? c : t
+ }, { level: -1 })
+ highLevelModal.handler && highLevelModal.handler()
+ }
+}
+
+const controlTypeMap = {}
+// 获取单例
+function createModalControl (type) {
+ if (!controlTypeMap[type]) {
+ controlTypeMap[type] = new ModalControl(type)
+ }
+ console.log('controlTypeMap[type]', controlTypeMap[type])
+ return controlTypeMap[type]
+}
+
+export default createModalControl
diff --git a/src/components/modalIndex/child.vue b/src/components/modalIndex/child.vue
@@ -0,0 +1,59 @@
+<template>
+ <div class="child">
+ <p>child子组件</p>
+ <a-modal v-model="visible" title="Modal" ok-text="确认" cancel-text="取消" @ok="hideModal" name="modalB">
+ <p>要展示在首页的弹框B</p>
+ </a-modal>
+ <Grandson />
+ </div>
+</template>
+
+<script>
+/* eslint-disable no-console */
+import Grandson from './grandson'
+import modalMap from './modalConfig'
+import { api4 } from '../../api'
+const modalList = modalMap.index.modalList
+import {createModal} from '@/libs/ModalControlClass'
+const modalControl = createModal(modalList)
+
+
+export default {
+ data(){
+ return {
+ visible:false,
+ list:[]
+ }
+ },
+ components: {
+ Grandson
+ },
+ created () {
+ this.initApi1(api4, modalList[1])
+ },
+ methods: {
+ initApi1 (apiName, modalItem) {
+ let that = this
+ apiName(modalItem).then(res => {
+ console.log('接口数据获取成功:', res)
+ // 接口的返回值控制弹窗的展示与否，所以加入弹窗管理实例中
+ modalControl.addQueue(modalItem, res.backShow).on(modalItem.name,function(list){
+ that.visible = true
+ that.list = list
+ console.log('bbbbbbbbbbb',that.list,that.list.length)
+ })
+ })
+ },
+ hideModal(){
+ let list = this.list.slice()
+ console.log(list, this.list.length,'&&&&&&')
+ let index = list.findIndex(item=>item.name==='modalB')
+ console.log(index, 'index')
+ this.list = list.splice(index,1)
+ console.log(list, '********')
+ modalControl.repeatCheck(list)
+ this.visible=false
+ }
+ }
+}
+</script>
diff --git a/src/components/modalIndex/grandson.vue b/src/components/modalIndex/grandson.vue
@@ -0,0 +1,55 @@
+<template>
+ <div class="main">
+ <p>grandson孙组件</p>
+ <a-modal v-model="visible" title="Modal" ok-text="确认" cancel-text="取消" @ok="hideModal" name="modalC">
+ <p>要展示在首页的弹框C</p>
+ </a-modal>
+ </div>
+</template>
+
+<script>
+/* eslint-disable no-console */
+import modalMap from './modalConfig'
+import { api1 } from '../../api'
+const modalList = modalMap.index.modalList
+import {createModal} from '@/libs/ModalControlClass'
+const modalControl = createModal(modalList)
+export default {
+ data(){
+ return {
+ visible:false,
+ list: []
+ }
+ },
+ components: {
+
+ },
+ created () {
+ this.initApi(api1, modalList[2])
+ },
+ methods: {
+ initApi (apiName, modalItem) {
+ let that = this
+ apiName(modalItem).then(res => {
+ console.log('接口数据获取成功:', res)
+ // 接口的返回值控制弹窗的展示与否，所以加入弹窗管理实例中
+ modalControl.addQueue(modalItem, res.backShow).on(modalItem.name,function(list){
+ that.visible = true
+ that.list = list
+ console.log('cccccccccccccc',list,list.length)
+ })
+ })
+ },
+ hideModal(){
+ let list = this.list.slice()
+ console.log(list, this.list.length,'&&&&&&')
+ let index = list.findIndex(item=>item.name==='modalC')
+ console.log(index, 'index')
+ this.list = list.splice(index,1)
+ console.log(list, '********')
+ modalControl.repeatCheck(list)
+ this.visible=false
+ }
+ }
+}
+</script>
diff --git a/src/components/modalIndex/index.vue b/src/components/modalIndex/index.vue
@@ -0,0 +1,70 @@
+<template>
+ <div class="main">
+ <p>弹框首页modalIndex</p>
+ <a-modal v-model="visible" title="Modal" ok-text="确认" cancel-text="取消" @ok="hideModal" name="modalA">
+ <p>要展示在首页的弹框A</p>
+ </a-modal>
+ <Child />
+ <div @click="add">234</div>
+ </div>
+</template>
+
+<script>
+/* eslint-disable no-console */
+import Child from './child'
+import modalMap from './modalConfig'
+
+import { api1 } from '../../api'
+
+const modalList = modalMap.index.modalList
+import {createModal} from '@/libs/ModalControlClass'
+const modalControl = createModal(modalList)
+
+export default {
+ data(){
+ return {
+ visible:false,
+ arr :[1,2,3]
+ }
+ },
+ components: {
+ Child
+ },
+ created () {
+ // 实际开发中，每个接口的数据逻辑应该都是不一样的，这里只是为了更直观地模拟多接口获取数据，只是一个占位表达
+ this.initApi(api1, modalList[0])
+ },
+ methods: {
+ initApi (apiName, modalItem) {
+ let that = this
+ apiName(modalItem).then(res => {
+ console.log('接口数据获取成功:', res)
+ // 接口的返回值控制弹窗的展示与否，所以加入弹窗管理实例中
+ modalControl.addQueue(modalItem, res.backShow).on(modalItem.name,function(list){
+ that.list = list
+ that.visible = true
+ console.log('aaaaaaaaaaa',list,list.length)
+ })
+ })
+ },
+ hideModal(){
+ // 操作，数组，一定要复制一份，不要在原数组操作，否则很容易出现漏洞
+ let list = this.list.slice()
+ console.log(list, this.list.length,'&&&&&&')
+ let index = list.findIndex(item=>item.name==='modalA')
+ console.log(index, 'index')
+ this.list = list.splice(index,1)
+ console.log(list, '********')
+ modalControl.repeatCheck(list)
+ this.visible=false
+ },
+ a(){
+ console.log(111)
+ },
+ add(){
+ this.arr.push(5)
+ console.log(this.arr)
+ }
+ }
+}
+</script>