[]
在上一节中,介绍了如何创建一个插件单元格使用 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实例。
设计时效果:
运行时效果如下: