[]
在之前章节中已经讲解了如何集成Vue组件的属性、事件和方法。 在 Vue 生态中有大量的第三方组件类库资源。本章节将以集成Element Plus 为例,讲解如何集成Vue 组件。
首先,通过修改PluginConfig.json 文件,引人第三方组件的Js。
找到Element Plugs CDN 上的Js,Css 文件并下载到插件的 Resources 文件夹内。
{
"assembly": [
"MyPlugin.dll"
],
"css": [
"Resources/Element/index.css"
],
"javascript": [
"Resources/Element/index.full.min.js",
"Resources/MyPluginCellType.js"
],
"serverApiAssembly": [],
"image": "Resources/PluginLogo.png",
"description": "这是一个活字格插件",
"name": "我的插件",
"pluginType": "cellType,command",
"guid": "f1e8c65d-9009-4e7e-b2a4-b6ff4c00e458",
"version": "1.0.0.0",
"dependenceVersion": "8.0.104.0",
"bundleJavaScript": true,
"bundleCSS": true
}
修改C# 代码如下:
using GrapeCity.Forguncy.CellTypes;
using GrapeCity.Forguncy.Commands;
using GrapeCity.Forguncy.Plugin;
namespace MyPlugin
{
[DependenceRuntimModule("vue3")]
public class MyPluginCellType : CellType
{
[CustomCommandObject]
public object ClickCommand { get; set; }
[ComboProperty(ValueList = "success|warning|info|error")]
public string icon { get; set; } = "success ";
public string title { get; set; } = "标题";
public string subTitle { get; set; } = "这里是子标题,可以是一些描述";
public string buttonText { get; set; } = "返回";
}
}
修改JavaScript 代码如下:
class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
createContent() {
this.content = $("<div/>");
return this.content;
}
onPageLoaded() {
const uid = "uid-" + new Date().valueOf();
this.content.attr("id", uid);
const self = this;
const cellType = this.CellElement.CellType;
const option = {
template:
`<el-result
:icon="icon"
:title="title"
:sub-title="subTitle"
>
<template #extra>
<el-button type="primary" @click="onClick">{{buttonText}}</el-button>
</template>
</el-result>`,
data() {
return {
title: cellType.title,
icon: cellType.icon,
subTitle: cellType.subTitle,
buttonText: cellType.buttonText,
}
},
methods: {
onClick() {
self.executeCustomCommandObject(self.CellElement.CellType.ClickCommand);
},
}
};
this.vueApp = Vue.createApp(option);
this.vueApp.use(window.ElementPlus);
this.vueApp.mount(`#${uid}`);
}
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);
设计时效果:
运行时效果如下: