无障碍：剩余页面的页面级别语音朗读

web/README.md

@@ -52,12 +52,12 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## 无障碍组件与外界的消息沟通
 
-### 向外发出
+### 向本组件$emit
 * show：组件显示
 * hide：组件隐藏
 * audio-end: 音频播放结束
 * audio-error: 音频出错
 * audio-abort: 音频中止（并非暂停，还不知道什么情况下会触发这个）
 
-### 从外部接受
+### 监听原型对象上的$eventBus的消息
 * request-read: 请求朗读指定的文本

web/src/views/About/Director.vue

@@ -77,7 +77,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the From the Director page. This page contains one navigation section, five window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/About/index.vue

@@ -132,7 +132,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the About page. This page contains one navigation section, eight window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/About/link.vue

@@ -92,7 +92,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Partners & Connections page. This page contains one navigation section, six window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Collections/index.vue

@@ -85,11 +85,54 @@ export default {
   //监控data中的数据变化
   watch: {
     // 监听地址栏参数变化
-    $route() {
-      // 拿到路由参数id
-      let temp = this.$route.params.id;
-      this.mbTxt = temp;
-      this.data = Collections[this.mbTxt];
+    $route: {
+      handler() {
+        // 拿到路由参数id
+        let temp = this.$route.params.id;
+        this.mbTxt = temp;
+        this.data = Collections[this.mbTxt];
+
+        let keyword = ''
+        switch (this.mbTxt) {
+          case 'Bronzes':
+            keyword = 'Bronzes'
+            break;
+          case 'Ceramics':
+            keyword = 'Ceramics'
+            break;
+          case 'Buddhist':
+            keyword = 'buddhist statues'
+            break;
+          case 'Jadewares':
+            keyword = 'Jadewares'
+            break;
+          case 'Calligraphies':
+            keyword = 'Calligraphies'
+            break;
+          case 'Paintings':
+            keyword = 'Paintings'
+            break;
+          case 'Gold':
+            keyword = 'gold & silverwares'
+            break;
+          case 'Coins':
+            keyword = 'coins & banknotes'
+            break;
+          case 'Brocades':
+            keyword = 'brocades & embroideries'
+            break;
+          case 'Cultural':
+            keyword = 'cultural supplies'
+            break;
+          case 'Miscellaneous':
+            keyword = 'miscellaneous arts'
+            break;
+          default:
+            break;
+        }
+        this.$eventBus.$emit('request-read', `You've reached the page contains tiles of ${keyword} of the Collections section. This page contains one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+      },
+      immediate: true,
     },
   },
   //方法集合
@@ -110,10 +153,6 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    // 拿到路由参数id
-    let temp = this.$route.params.id;
-    this.mbTxt = temp;
-    this.data = Collections[this.mbTxt];
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

web/src/views/Events/index.vue

@@ -53,7 +53,9 @@ export default {
 
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Events page. This page contains one navigation section, five window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Events/info.vue

@@ -124,7 +124,9 @@ export default {
     this.getData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+      this.$eventBus.$emit('request-read', `You've reached the sub-page of the Events page.This page contains one navigation section, four window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/JoinSupport/Give.vue

@@ -55,7 +55,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Ways to Give page of the Join & Support section. This page contains one navigation section, six window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/JoinSupport/Volunteer.vue

@@ -50,7 +50,9 @@ export default {
     this.data = JoinSupport.Volunteer;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Ways to Volunteer page of the Join & Support section. This page contains one navigation section, six window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/LearnEngage/index.vue

@@ -110,6 +110,22 @@ export default {
         tempArrAll.push(temp.slice(i * 8, (i + 1) * 8));
       }
       this.data = tempArrAll;
+
+      let keyword = ''
+      switch (this.topId) {
+        case 'Students':
+          keyword = 'For Students'
+          break;
+        case 'Adults':
+          keyword = 'For Adults'
+          break;
+        case 'Families':
+          keyword = 'For Families & Children'
+          break;
+        default:
+          break;
+      }
+      this.$eventBus.$emit('request-read', `You've reached the ${keyword} page of the Learn & Engage section. This page contains one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）

web/src/views/LearnEngage/info.vue

@@ -83,7 +83,9 @@ export default {
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the tertiary page of the Learn & Engage section. This page contains one navigation section, five window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Publications/Publications1.vue

@@ -108,7 +108,9 @@ export default {
     if(pInd) this.txtInd=Number(pInd)
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Magazines page of the Publications section. This page contains one navigation section, seven window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Publications/Publications2.vue

@@ -52,7 +52,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Exhibition Catalogues page of the Publications section. This page contains one navigation section, six window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Search/index.vue

@@ -113,7 +113,9 @@ export default {
     if (txt) this.txt = txt;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Search page. This page contains one navigation section, five window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/bottom/Employment.vue

@@ -147,7 +147,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Employment page. This page contains one navigation section, five window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/bottom/Index.vue

@@ -450,7 +450,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', ` You've reached the Site Index page. This page contains one navigation section, three window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/bottom/Use.vue

@@ -114,7 +114,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Terms of Use page. This page contains one navigation section, five window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前