Header设计器头部组件

约 518 字大约 2 分钟

...

2026-02-02

温馨提示

Designer设计器组件默认内置了 Header 组件. 可通过参数传递标题，菜单等.

通过 #header 插槽自定义 Header 组件时 Designer相关参数无效.

示例代码

header-test.vue
<template>
  <div style="width: 100vw; height: 97vh;">
    // 这里传递 headerTitle 无效！ 因为已经用#header插槽 Header组件覆盖
    <Designer headerTitle="sv-print!!">
      <template #header>
        <Header
          title="sv-print"
          :reEle="headerNewEle"
          :eleList="headerEleList"
          :reMenu="headerNewMenu"
          :menuList="headerMenuList"
        />
      </template>
    </Designer>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer, Header, Preview, DragBox } from '@sv-print/vue3';
const headerNewEle = ref(false); // 是否重新 创建元素
const headerEleList = ref([
  {
    gap: true,
  },
  {
    icon: 'sv-base',
    title: '基础',
    children: [
      {
        type: 'defaultModule.hline', // provider tid
        icon: 'sv-hline',
        title: '横线',
      },
    ],
  },
]);
const headerNewMenu = ref(false); // 是否重新 创建菜单
const headerMenuList = ref([
  {
    icon: 'sv-browser',
    title: '保存到浏览器',
    desc: 'Ctrl / Command + S',
    click: (util) => util.save(),
  },
]);
</script>

组件参数

参数键名	数据类型	默认值	说明	备注
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	右侧

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)