@tanzhenxing/zx-title v1.0.13

zx-title 标题组件

介绍

zx-title 是一个用于显示标题的组件，支持多种标题级别、副标题、图标和右侧操作区域，适用于各种标题展示场景。

基本用法

<zx-title title="标题文本" type="h2"></zx-title>

带图标

<zx-title title="带图标的标题" iconShow icon="home" iconColor="#3c9cff"></zx-title>

带副标题

<zx-title title="主标题" subtitle="副标题描述" type="h2"></zx-title>

带右侧操作

<zx-title title="带操作的标题" rightText="更多" @right="handleRight"></zx-title>

自定义右侧内容

<zx-title title="自定义右侧">
  <template #right>
    <button size="mini" type="primary">操作按钮</button>
  </template>
</zx-title>

自定义样式

<zx-title 
  title="自定义样式" 
  type="h3" 
  color="#ff5500" 
  background="#f8f8f8" 
  padding="20rpx" 
  borderRadius="10rpx">
</zx-title>

API

属性

事件

插槽

示例代码

<template>
  <view>
    <!-- 基础用法 -->
    <zx-title title="基础标题" type="h2"></zx-title>
    
    <!-- 带图标 -->
    <zx-title 
      title="带图标的标题" 
      iconShow 
      icon="star" 
      iconColor="#ff9900">
    </zx-title>
    
    <!-- 带副标题 -->
    <zx-title 
      title="产品详情" 
      subtitle="了解更多产品信息和使用方法" 
      type="h3" 
      color="#2979ff">
    </zx-title>
    
    <!-- 带右侧文本 -->
    <zx-title 
      title="消息列表" 
      rightText="查看全部" 
      @right="onViewAll">
    </zx-title>
    
    <!-- 自定义右侧内容 -->
    <zx-title title="商品分类">
      <template #right>
        <view class="custom-right">
          <button size="mini" type="primary">筛选</button>
        </view>
      </template>
    </zx-title>
    
    <!-- 自定义样式 -->
    <zx-title 
      title="热门推荐" 
      background="#f5f5f5" 
      padding="20rpx 30rpx" 
      borderRadius="10rpx" 
      iconShow 
      icon="fire" 
      iconColor="#ff5500">
    </zx-title>
  </view>
</template>

<script setup>
const onViewAll = () => {
  uni.navigateTo({
    url: '/pages/message/list'
  });
};
</script>