# @on
@on 指令通常用于监听组件的上触发的事件，包括组件中的自定义事件和DOM原生事件，并且可以接受一个表达式，在事件触发后该表达式将被执行。
# 用法
监听自定义事件语法：
<component @on.custom-event-name="expression"></component>监听DOM原生事件：
<component @on.native.click="expression"></component>
# 示例
下面的示例通过两个按钮演示了两种事件的用法， 请点击 run 按钮启动示例：
<html>
<template id="layout-template">
<webpdf>
<div>
<custom:listener></custom:listener>
</div>
<div class="fv__ui-body">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<script>
const { SeniorComponentFactory, modular } = UIExtension;
class EventEmitterComponent extends SeniorComponentFactory.createSuperClass({
template: `
<button></button>
`
}) {
static getName() {
return 'emitter'
}
mounted() {
super.mounted();
this.trigger('foo')
}
}
class EventListenerComponent extends SeniorComponentFactory.createSuperClass({
template: `
<div @var.self="$component">
<custom:emitter @on.foo="self.onFoo()" @on.native.click="self.onNativeClick()" @cannotBeDisabled >Mouse click</custom:emitter>
</div>
`
}) {
static getName() {
return 'listener'
}
onFoo() {
alert('on foo'); // emitter 组件在 mounted 之后将立即触发 foo 事件
}
onNativeClick() {
alert('on native click event'); // 点击 emitter 组件后，将触发 click 事件
}
}
modular.module('custom', [])
.registerComponent(EventEmitterComponent)
.registerComponent(EventListenerComponent)
;
var CustomAppearance = UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {
return document.getElementById('layout-template').innerHTML;
}
});
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
}
},
renderTo: document.body,
appearance: CustomAppearance,
addons: []
});
</script>