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"
                :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>