1.0.4 • Published 10 months ago
asi-section v1.0.4
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 触发事件 | - |