集成第三方 Vue 组件类库

在之前章节中已经讲解了如何集成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);

设计时效果：

运行时效果如下：

页面树结构

集成第三方 Vue 组件类库