Header组件
注意
建议使用 组件 ^0.2.x 版本
组件参数
| 参数键名 | 数据类型 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|
| logoHtml | string | <i class="svp-header-logo svicon sv-print"></i> | 左侧logohtml | |
| title | string | sv-print | 左侧标题 | |
| reEle | string | false | 是否新建元素 | true则清空默认元素,以 eleList 为准 |
| eleList | string | [] | 元素列表 | |
| reMenu | string | false | 是否新建菜单 | true则清空默认菜单,以 menuList 为准 |
| menuList | string | [] | 菜单列表 | |
| onPreviewClick | function(e: MouseEvent):boolean | 预览 点击事件 | 返回 "true|false" 是否阻止冒泡 |
组件插槽
注意
插槽内容会清空 对应参数将失效.
| 插槽名称 | 描述 |
|---|---|
| headerLeft | 左侧 |
| headerCenter | 中间 |
| headerRight | 右侧 |
示例(vue3)
<template>
<div style="width: 100vw; height: 97vh;">
<Designer>
<template #header>
<Header title="sv-print" />
</template>
</Designer>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Designer, Header, Preview, DragBox } from "@sv-print/vue3";
</script>