SatPanel公共UI组件

基础用法

vue

<script setup lang="ts">
import { type SatTaskViewItem, type SatMenuItem } from '../packages/main'
const myComponentData: SatMenuItem & SatTaskViewItem = reactive({
  name: 'MyComponent',
  label: '我的组件',
  icon: {
    class: 'fa-paper-plane-o',
  },
  enable: true,
  active: true,
  eleId: 'MyComponent',
  onActive() {
    changeDataActive(this, true)
  },
})
const changeDataEnable = (item: SatMenuItem, flag: boolean) => {
  item.enable = flag
  item.active = flag
}
const changeDataActive = (item: SatMenuItem, flag: boolean) => {
  item.active = flag
}
</script>
<template>
  <SatGlobe>
    <SatPanel
      v-if="myComponentData.enable"
      v-show="myComponentData.active"
      :id="myComponentData.eleId"
      :is-minimize="true"
      :minimize-event="() => changeDataActive(myComponentData, false)"
      :close-event="() => changeDataEnable(myComponentData, false)"
      :is-close="true"
      :title="myComponentData.name"
      :drag-initial-value="{ x: 40, y: 30 }"
    >
      my-component
    </SatPanel>
  </SatGlobe>
</template>

属性

参数	说明	类型	可选值	默认值
title	必传。头部标题	string	-	-
is-drag	是否可拖拽	boolean	true/false	true
drag-initial-value	面板初始位置，绝对定位	`SatPanelPosition: { x: number, y: number }`	-	`{ x: 40, y: 30 }`
is-maximize	移动端模式下是否显示最大化按钮	boolean	true/false	true
window-size	移动端模式下窗口大小	string	Maximize/Nomal	Nomal
is-minimize	是否显示最小化按钮	boolean	true/false	false
is-close	是否显示关闭按钮	boolean	true/false	false
minimize-event	点击最小化按钮事件	() => void	-	-
close-event	点击关闭按钮事件	() => void	-	-

插槽

插槽名	说明
-	自定义内容