[email protected]

顶栏标题，可自定义背景色、标题，图标，留有插槽。

示例

<template>
  <t-header-base
    :icon="logo"
    title="systemTitle"
    :background-image="bg"
    :c-style="{
      icon: {
        default: {
          backgroundColor: 'var(--theme-color)'
        }
      }
    }"
  >
    右侧插槽
  </t-header-base>
  <t-header-base
    :c-style="{
      wrapper: {
        default: { backgroundColor }
      },
      title: {
        default: { color: fontColor }
      }
    }"
    @title-click="tileClick"
  >
    插入内容
  </t-header-base>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import logo from '../../../site/assets/images/logo.svg'
import bg from '../../../site/assets/images/001.png'

export default defineComponent({
  setup() {
    const title = ref('测试标题') // 标题文字
    const fontColor = ref('pink') // 标题颜色
    const backgroundColor = ref('#FFF') // 组件背景颜色

    /**
     * @description: 点击标题
     */
    const tileClick = () => {
      // 标题点击事件
      console.log('你已经点击了标题')
    }

    return {
      bg,
      logo,
      title,
      fontColor,
      backgroundColor,
      tileClick
    }
  }
})
</script>

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/header-base
yarn add @ths-base/header-base

使用

import THeaderBase from '@ths-base/header-base'
import '@ths-base/header-base/lib/index.css'
createApp(App).use(THeaderBase)

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(THeaderBase)

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ---------------- | ------------ | ------- | ------------- | ------ | ------ | | title | 标题 | string | -- | -- | | | icon | 图标 | string | -- | -- | | | background-image | 导航背景图片 | string | -- | -- | | | pointer | 手型样式显示 | boolean | false | true | false | | | c-style | 自定义样式 | object | -- | -- | |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | | ------- | -------------- | --------- | | wrapper | default | 容器 | | icon | default | logo 图标 | | title | default | 标题文字 |

颜色变量使用说明

| 颜色变量 | 说明 | | ----------------------------- | ------------------------------ | | -t-header-base-bg-color | 背景 | | --t-header-base-text-size | 标题文字大小 | | --t-header-base-text-color | 标题文字颜色 | | --t-header-base-logo-bg-color | logo 颜色（针对.svg 类型图片） | | --t-header-base-text-weight | 标题粗细 |

事件

| 事件名称 | 说明 | 回调参数 | | ----------- | ------------ | -------- | | title-click | 点击标题➕logo区域事件 | |

作者：喻双