Asi-section Component

🌟 一个用于文章、列表详情等标题展示的标题栏组件 🌟

安装

使用npm/pnpm/yarn安装asi-section组件:

pnpm install asi-section -S

注册

在src/main.js

import asiSection from "asi-section";
app.use(asiSection);
import 'asi-section/asi-section.css';

基本用法

<asi-section title="基础用法" sub-title="副标题"></asi-section>

<asi-section title="竖线装饰" sub-title="副标题" type="line"></asi-section>

<asi-section title="装饰器插槽" sub-title="副标题">
  <template v-slot:decoration>
    <div class="decoration"></div>
  </template>
</asi-section>

<asi-section title="默认插槽" sub-title="副标题">默认插槽内容</asi-section>

<asi-section title="主标题">
  <template v-slot:right>
    right slot
  </template>
</asi-section>

属性

Section Props

| 属性名 | 类型 | 默认值 | 说明 | |:--------------------:|:--------:|:------:|---------------------------------------| | type | String | - | 装饰类型，可选值：line（竖线）、circle（圆形）、square（方形） | | title | String | - | 主标题 | | titleFontSize | String | 14px | 主标题字体大小 | | titleColor | String | #333 | 主标题字体颜色 | | bgColor | String | #2979ff | 装饰器背景颜色 | | subTitle | String | - | 副标题 | | subTitleFontSize | String | 12px | 副标题字体大小 | | subTitleColor | String | #999 | 副标题字体颜色 | | padding |Bolean/String| false | 默认插槽容器的 padding 值，传入类型为 Boolean 时，设置为 10px 或 0 |

方法

Section Events

| 事件名 | 事件说明 | 返回参数 | |:------------:|:----------------:|:-----------:| | @click | 点击 Section 触发事件 | - |