集成 Vue 组件的方法与事件

在上一节中，介绍了如何创建一个插件单元格使用 Vue的组件和属性。本章节讲介绍如何把Vue的方法和事件与活字格的命令和单元格操作集成。

假设在按钮点击时，希望执行活字格的命令。并且单元格提供两个单元格操作。一个是修改标签文本，一个是控制 count 属性自增。

C# 端代码如下：

using GrapeCity.Forguncy.CellTypes;
using GrapeCity.Forguncy.Commands;
using GrapeCity.Forguncy.Plugin;

namespace MyPlugin
{
    [DependenceRuntimModule("vue3")]
    public class MyPluginCellType : CellType
    {
        [CustomCommandObject]
        public object ClickComment { get; set; }
        public string Label { get; set; } = "点击次数为";

        [RunTimeMethod]
        public void CountAdd()
        {
        }

        [RunTimeMethod]
        public void ChangeLabel(string label)
        {
        }
    }
}

JavaScript 代码如下：

/// <reference path="../Declarations/forguncy.d.ts" />
/// <reference path="../Declarations/forguncy.Plugin.d.ts" />

class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
    createContent() {
        this.content = $("<div/>");
        return this.content;
    }
    onPageLoaded() {
        const uid = "uid-" + new Date().valueOf();
        const self = this;
        this.content.attr("id", uid);
        const option = {
            template:
                `<div id="app">
  <button @click="onClick">
    {{label}} : {{ count }}
  </button>
</div>`,
            data() {
                return {
                    count: 0,
                    label: self.CellElement.CellType.Label
                }
            },
            methods: {
                onClick() {
                    self.executeCustomCommandObject(self.CellElement.CellType.ClickCommand);
                    this.addOne();
                },
                addOne() {
                    this.count++;
                },
                changeLabel(newLabel) {
                    this.label = newLabel;
                }
            }
        };
        option.beforeCreate = function () {
            self.vue = this;
        };
        this.vueApp = Vue.createApp(option);
        this.vueApp.mount(`#${uid}`);
    }
    CountAdd() {
        this.vue.addOne();
    }
    ChangeLabel(label) {
        this.vue.changeLabel(label);
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);

修改点：

给 option 对象添加了 methods 属性。
methods 属性声明了三个方法，分别为： onClick, addOne 和 changeLabel。这三个方法执行的上下文都是vue 组件内部，可以直接操作(获取或设值) vue 组件的属性。
组件模板中，按钮的click 事件绑定了 onClick。点击按钮时， onClick 方法会被调用。在onClick 方法中，可以执行活字格的命令。
单元格上声明了和C# 的 RunTimeMethod 同名的方法。执行单元格操作时会被自动调用。在这个方法中，可以通过 this.vue.proxy 获得vue 组件，并调用vue组件内部方法，会操作属性。this.vue 通过监听beforeCreate 生命周期获得vue实例。

设计时效果：

运行时效果如下：

页面树结构

集成 Vue 组件的方法与事件