CustomHeader 头部

引入

import PressCustomHeader from '@tencent/press-next/press-custom-header/press-custom-header';

代码演示

基础用法

<PressCustomHeader
  title="创建比赛"
  header-style="color: #000;padding-top: 44px;"
  header-icon-class="icon-back"
  @goBack="goBack"
  @clickIcon="clickIcon"
/>
<div
  style="margin-top: 44px"
/>
<div class="bg-[gray] text-white flex items-center justify-center h-40">
  页面主体
</div>

const goBack = () => {
  console.log('[goBack]');
};


const clickIcon = () => {
  console.log('[clickIcon]');
};

API

Props

interface Props {
  title?: string;
  headerStyle?: string;

  titleStyle?: string;

  headerIconClass?: string;
  headerIconStyle?: string;
}

withDefaults(defineProps<Props>(), {
  title: '',
  headerStyle: '',

  titleStyle: '',

  headerIconClass: '',
  headerIconStyle: '',
});

Events

const emits = defineEmits<{
  goBack: [],
  clickIcon: []
}>();