福昕开发者文档中心

@on ​

@on 指令通常用于监听组件上触发的事件，包括组件中的自定义事件和 DOM 原生事件，并可以接受一个表达式，在事件触发后执行。

用法 ​

  1. 监听自定义事件语法：

    html
    <component @on.custom-event-name="expression"></component>

  2. 监听 DOM 原生事件的语法：

    html
    <component @on.native.click="expression"></component>

示例 ​

以下示例通过两个按钮展示了自定义事件和 DOM 原生事件的用法。请点击 run 按钮启动示例：

html

<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>