快应用

Appearance

使用初探 ​

发送事件 ​

使用ESEventBus.$emit(eventName, params)发送事件。
示例代码: es-eventbus-second-page.vue

点击查看源码
js
<template>
  <div class="es-second-page">
    <span class="es-second-page-title-text">ESEvent第二个页面</span>
    <div class="es-second-page-button"
         :focusable="true"
         :enableFocusBorder="true"
         :focusScale="1.1"
         @click="onClick">
      <span class="es-second-page-text">发送事件</span>
    </div>
  </div>
</template>

<script>
import {ESPage, ESEventBus} from "@extscreen/es-core";

const TAG = "ESEventBus"
export default {
  name: "es-eventbus-second-page",
  mixins: [ESPage],
  methods: {
    onClick(e) {
      //
      ESEventBus.$emit('helloEvent', {
        msg: 'hello eventbus!',
      })
    },
  },
}
</script>

<style scoped>
.es-second-page {
  width: 1920px;
  height: 1080px;
  background-color: grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.es-second-page-button {
  width: 550px;
  height: 80px;
  background-color: #42b983;
  margin: 20px;
  border-radius: 8px;
}

.es-second-page-text {
  width: 550px;
  height: 80px;
  font-size: 20px;
  text-align: center;
  color: white;
  margin-bottom: 100px;
}

.es-second-page-title-text {
  width: 550px;
  height: 80px;
  font-size: 30px;
  text-align: center;
  color: #42b983;
  margin-bottom: 100px;
}
</style>

接收事件 ​

使用ESEventBus.$on(eventName, eventHandler)接收事件。

示例代码: es-eventbus-first-page.vue

点击查看源码
js
<template>
  <div class="es-first-page">
    <span class="es-first-page-title-text">ESEvent第一个页面</span>
    <div class="es-first-page-button"
         :focusable="true"
         :enableFocusBorder="true"
         :focusScale="1.1"
         @click="onLaunchButtonClicked">
      <span class="es-first-page-text">打开第二个页面</span>
    </div>
  </div>
</template>

<script>

import {ESLaunchManager, ESPage, ESToast, ESEventBus} from "@extscreen/es-core";

const TAG = "ESEventBus"
export default {
  name: "es-eventbus-first-page",
  mixins: [ESPage],
  methods: {
    onESCreate(params) {
      //
      ESEventBus.$on('helloEvent', this.onReceivedHelloEvent);
    },
    onESDestroy() {
      ESEventBus.$off('helloEvent', this.onReceivedHelloEvent);
    },
    onReceivedHelloEvent(event) {
      ESToast.showToast(JSON.stringify(event));
    },
    onLaunchButtonClicked() {
      ESLaunchManager.launchESPage({
        url: 'es_eventbus_second_page'
      })
    }
  },
}
</script>

<style scoped>
.es-first-page {
  width: 1920px;
  height: 1080px;
  background-color: grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.es-first-page-button {
  width: 550px;
  height: 80px;
  background-color: #42b983;
  margin: 20px;
  border-radius: 8px;
}

.es-first-page-text {
  width: 550px;
  height: 80px;
  font-size: 20px;
  text-align: center;
  color: white;
}

.es-first-page-title-text {
  width: 550px;
  height: 80px;
  font-size: 30px;
  text-align: center;
  color: #42b983;
  margin-bottom: 100px;
}
</style>

取消事件 ​

使用ESEventBus.$off(eventName, eventHandler)取消事件。

示例代码: es-eventbus-first-page.vue

点击查看源码
js
...
<script>

import {ESLaunchManager, ESPage, ESToast, ESEventBus} from "@extscreen/es-core";

export default {
  name: "es-eventbus-first-page",
  mixins: [ESPage],
  methods: {
...
    onESDestroy() {
      //
      ESEventBus.$off('helloEvent', this.onReceivedHelloEvent);
    },
    onReceivedHelloEvent(event) {
      ESToast.showToast(JSON.stringify(event));
    },
...
  },
}
</script>
...

取消应用内事件 ​

使用ESEventBus.$off(eventName) 来移除应用内所有对此事件的监听。

示例代码: es-eventbus-first-page.vue

点击查看源码
js
...
<script>

import {ESPage, ESEventBus} from "@extscreen/es-core";

export default {
  name: "es-eventbus-first-page",
  mixins: [ESPage],
  methods: {
...
    onESDestroy() {
      ESEventBus.$off('helloEvent');
    },
...
  },
}
</script>
...

取消应用内所有事件 ​

使用ESEventBus.$off()来移除应用内所有事件监听，不需要添加任何参数。
示例代码: es-eventbus-first-page.vue

点击查看源码
js
...
<script>

import {ESPage, ESEventBus} from "@extscreen/es-core";

export default {
  name: "es-eventbus-first-page",
  mixins: [ESPage],
  methods: {
...
    onESDestroy() {
      ESEventBus.$off();
    },
...
  },
}
</script>
...