View-useFrontendDependencies.md

description	前端扩展组件库（uilibs）的使用说明

扩展组件库的逻辑和数据结构示例

扩展组件库定义

export class MapLocation extends ViewComponent { constructor(options?: Partial); }

export class MapLocationOptions extends ViewComponentOptions { // 当前选中的位置坐标 value: { lng: nasl.core.Decimal; lat: nasl.core.Decimal; }; // 是否启用自动定位功能 autoLocateEnabled: nasl.core.Boolean; // 标记点是否可拖动 markerDraggable: nasl.core.Boolean; // 是否启用地址搜索功能 searchEnabled: nasl.core.Boolean; // 是否显示坐标信息 showCoordinates: nasl.core.Boolean; // 是否显示地址信息 showAddress: nasl.core.Boolean; // 地图容器高度 mapHeight: nasl.core.String; // 地图容器宽度 mapWidth: nasl.core.String; // 地图初始缩放级别 zoomLevel: nasl.core.Integer;

// 位置信息变更时触发
onUpdate: (event: {  lng: nasl.core.Decimal;  lat: nasl.core.Decimal;  address: nasl.core.String;}) => void;
// 自动定位成功时触发
onAutoLocateSuccess: (event: {  lng: nasl.core.Decimal;  lat: nasl.core.Decimal;  address: nasl.core.String;}) => void;
// 自动定位失败时触发
onAutoLocateError: (event: {  error: nasl.core.String;}) => void;
// 标记点位置变更时触发
onMarkerPositionChanged: (event: {  lng: nasl.core.Decimal;  lat: nasl.core.Decimal;}) => void;
// 地图点击时触发
onMapClick: (event: {  lng: nasl.core.Decimal;  lat: nasl.core.Decimal;}) => void;
// 地址搜索完成时触发
onAddressSearch: (event: {  lng: nasl.core.Decimal;  lat: nasl.core.Decimal;  address: nasl.core.String;}) => void;
// 位置信息更新时触发
onLocationInfoUpdated: (event: {  lng: nasl.core.Decimal;  lat: nasl.core.Decimal;  address: nasl.core.String;}) => void;

// 自定义搜索输入框
slotSearchInput: (current: {  onSearch: (event: {    value: nasl.core.String;  }) => void;  value: nasl.core.String;}) => Array<nasl.ui.ViewComponent>;
// 自定义地图控件区域
slotControls: (current: {  onLocate: () => void;  onReset: () => void;}) => Array<nasl.ui.ViewComponent>;
// 自定义位置信息展示面板
slotInfoPanel: (current: {  coordinates: {    lng: nasl.core.Decimal;    lat: nasl.core.Decimal;  };  address: nasl.core.String;}) => Array<nasl.ui.ViewComponent>;

}

扩展组件库使用示例

<uilibs.map_location.components.MapLocation
    value={variable1} showCoordinates={true} showAddress={true}
    onUpdate={function(event) {
        console.log(event);
    }}
    onAutoLocateSuccess={function(event) {
        console.log(event);
    }}
    onAutoLocateError={function(event) {
        console.log(event);
    }}
    slotInfoPanel={() => <ElFlex>
        <ElText text="坐标：" />
        <ElText text={variable1.lng} />
        <ElText text="，" />
        <ElText text={variable1.lat} />
    </ElFlex>}
/>

- uilibs.xxx.ts 文件为外部依赖，仅可引用，不可修改 - 使用组件、逻辑调用和数据结构时，一定要写全命名空间，如 `{外部依赖类型(复数)}.${扩展组件库名}.{components|logics|structures}.${组件名|逻辑名|数据结构名}` - 使用时，一定要用 tsx 的语法，不要用 new Class() 的方式。