ASTRO轻应用 ASTROZERO-（可选）开发自定义登录组件:自定义登录组件

时间：2024-07-22 10:18:52

ASTRO轻应用 ASTROZERO

自定义登录组件

进入创建“设备维修管理系统”应用中创建的应用。
在左侧资产下的组件模板中，单击widgetVueTemplate，再单击“下载”。

图1 下载组件模板
在弹出的窗口中，输入组件名称，并单击“保存”，将组件模板保存到本地，并解压。

图2 输入组件名称
查看解压后的组件目录。

目录结构如图3所示，其中userLogin.js文件是写vue业务逻辑的代码，userLogin.ftl用于写html代码，userLogin.css用于写样式代码，userLogin.editor.js以及packageinfo.json是配置文件。
图3 目录结构

在本地编辑器中打开文件夹，把userLogin.editor.js文件中的config代码改为如下代码，用于配置桥接器。

config: [
                {
                    type: 'connectorV2',
                    name: 'FlowConnector',
                    label: 'Flow Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.GetConnector',
                    label: 'View API Get Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.PostConnector',
                    label: 'View API Post Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.PutConnector',
                    label: 'View API Put Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.DeleteConnector',
                    label: 'View API Delete Connector',
                    model: 'ViewModel'
                },
            ]

把packageinfo.json文件中加入如下加粗内容。

{
    "widgetApi": [
        {
            "name": "userLogin"
        }
    ],
    "widgetDescription": "",
    "authorName": "",
    "localFileBasePath": "",
    "requires": [
        {
            "name": "global_Vue",
            "version": "100.8.3"
        },
        {
            "name": "global_VueI18n",
            "version": "100.7.3"
        },
        {
            "name": "global_Element",
            "version": "101.0.3"
        }
    ]
}