# WidgetInfoMixin
继承自 AppMixin,微件信息混入,提供微件的基础信息。
一般在主题的子组件中混入 WidgetInfoMixin,这些组件可以直接使用 AppMixin 和 WidgetInfoMixin 里的属性、方法和钩子函数。比如一张图经典主题左侧展开面板里的子组件 mp-pan-spatial-map-toolbar-card。
# props
参数 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
---|---|---|---|---|---|
widget | 微件。 | object |
# computed
参数 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
---|---|---|---|---|---|
widgetInfo | 微件信息,包括 id、uri、label、icon、config、assetsUrl、position、openAtStart、visible、dragable、properties 等。可参考 app.json | object |
// widgetInfo 示例
{
id,
uri,
// 解析后的label
label,
// 解析后的icon
icon,
// 解析后的config
config,
// 拼接后的资源url
assetsUrl,
position,
openAtStart,
visible,
dragable,
// 解析后的微件属性
properties
}
# methods
# parsePostion
描述:解析微件位置。
返回值:微件的位置。
参数
参数 描述 类型 默认值 widget 微件对象 object -
# parseProperties
描述:解析微件属性。
返回值:微件的属性。
参数
参数 描述 类型 默认值 widget 微件对象 object -
# parseIcon
描述:解析微件图标。
返回值:微件的图标。
参数
参数 描述 类型 默认值 widget 微件对象 object -
# parseLabel
描述:解析微件名称。
返回值:微件的名称。
参数
参数 描述 类型 默认值 widget 微件对象 object -
# parseComponent
描述:解析微件对应的组件。
返回值:微件对应的组件。
参数
参数 描述 类型 默认值 widget 微件对象 object -
# parseLoadScript
描述:解析微件对应的 js 文件。
返回值:微件路径和微件名。
参数
参数 描述 类型 默认值 fileName 文件字段名(jsFile、cssFile、settingJsFile、settingCssFile) string - compareStr 文件名 string - # loadScript
描述:加载微件对应的 js 文件。
参数
参数 描述 类型 默认值 url 微件对象 object - id 微件对象 object - # loadStyle
描述:加载微件对应的 css 文件。
返回值:微件对应的组件。
参数
参数 描述 类型 默认值 url 微件对象 object - id 微件对象 object - 示例
<template>
<div class="card-command" @click="$emit('click')">
<mapgis-ui-icon :icon="widgetInfo.icon" class="icon" />
<div class="label">{{ widgetInfo.label }}</div>
</div>
</template>
<script>
import { WidgetInfoMixin } from '@mapgis/web-app-framework'
export default {
name: 'MpPanSpatialMapToolbarCard',
mixins: [WidgetInfoMixin]
}
</script>