asi-section

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 触发事件	-