组件使用说明
Shimon Zhan 已为 inNENU Website 开发了一些常规组件。本文介绍了这些组件的配置。
常规组件
提示
所有以 Base 开头的组件都包含如下属性:
| 属性 | 必填 | 类型 | 内容 | | ---- | :--: | :--------------: | --------- | --- | | myId | 是 | Number 或 String | 组件的 ID | |
以下是项目中中常用的组件。
BaseHead
页面标题文字
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| title | 是 | String | 页面选项卡文字 |
BaseTitle
段落间大标题
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| text | 是 | String | 标题文字 | |
| myStyle | 否 | String 或 Style | 标题自定义样式 | 填入任意 css 样式 |
BaseP
段落文字(可带图)
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| text | 是 | String | 段落的文字 | 可以识别连续的空格，使用 \n 表示回车，也可直接使用 <br /> 换行 |
| head | 否 | String | 段落的标题 | |
| headStyle | 否 | String 或 Style | 标题自定义样式 | 填入任意 css 样式 |
| myStyle | 否 | String 或 Style | 标题自定义样式 | 填入任意 css 样式 |
| src | 否 | String | 图片的路径 | 会在段落后渲染一张图片 |
| desc | 否 | String | 图片的描述文字 | 会自动在文字前加 ▲ |
BaseImg
图片
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| src | 是 | String | 图片的路径 | |
| desc | 否 | String | 图片的描述文字 | 会自动在文字前加 ▲ |
BaseList
列表
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| content | 是 | String | 列表内容 | |
| head | 否 | String 或 Boolean | 列表的标题 | 默认为 ''，设置 false 取消显示列表标题，否则即使不设置也会显示一个空标题 |
| foot | 否 | String | 列表的页脚文字 | 默认为 '',不显示页脚 |
BaseGrid
九宫格
| 属性 | 必填 | 类型 | 内容 | | ------- | :--: | :---------------: | ---------------- | ------------------------------------------------------------------------------ | | content | 是 | GirdItem[] | 九宫格单元内容 | | head | 否 | String 或 Boolean | 九宫格的标题 | 默认为 ''，设置 false 取消显示九宫格标题，否则即使不设置也会显示一个空标题 | | foot | 否 | String | 九宫格的页脚文字 | 默认为 '',不显示页脚 |
- GirdItem
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| icon | 是 | String | 图标地址 |
| text | 是 | String | 文字 |
| url | 是 | String | 跳转链接 |
BaseFoot
页脚
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| desc | 否 | String | 页脚额外描述文字 | |
| author | 否 | String | 作者 | 默认为 Shimon Zhan，如需取消请传入 '' |
| time | 否 | String | 最后编辑时间 |
BaseCarousel
轮播图
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| content | 是 | CarouselItem[] | 轮播图组件内容 | |
| vertical | 否 | Boolean | 是否竖直显示 | 默认为 false |
| autoplay | 否 | Boolean | 是否支持自动播放 | 默认为 true |
| autoplaySpeed | 否 | Number | 自动播放时间间隔 | 默认为 3000 |
| speed | 否 | Number | 切换速度 | 默认为 500 |
| dotDisplay | 否 | Boolean | 是否显示指示点 | 默认为 true |
| arrowDisplay | 否 | Boolean | 是否显示切换箭头 | 默认为 true |
| easing | 否 | String | 切换动画 | 默认为 easeInOutQuart |
- CarouselItem
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| caption | 是 | String | 轮播图的主标题 | 请填入核心内容 |
| subCaption | 是 | String | 轮播图的副标题 | 主标题的进一步解释 |
| src | 是 | String | 图片的路径 | 所有轮播图图片长宽比例应该相同，推荐值 16: 9 |
| url | 否 | String | 轮播图点击时的跳转路径 | 支持相对路径绝对路径以及 http、https 链接 |
| enSubhead | 否 | String | 轮播图的英文副标题 | |
| alt | 否 | String | 图片失效时的显示文字 | 不填会默认初始化为文字 轮播图背景 |
| desc | 否 | String | 页面右下角补充说明 | 仅在 large 及以上屏幕上显示 |
| black | 否 | Boolean | 是否采用黑色文字 | 默认文字色为白色 |
BasePhone
生成拨打电话提示，该组件仅为兼容小程序。
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| number | 是 | String 或 Number | 电话号码 |
以下是以便复用的不常用组件
Nav 组件
网页导航栏
Slide 组件
网页侧边栏
Footer 组件
网页页脚
BaseMenu 组件
生成竖直菜单
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| list | 是 | MenuItem[] | 菜单内容 |
- MenuItem
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| key | 是 | String | 菜单项的标识符 | 不可重复 |
| title | 是 | String | 菜单的文字 | |
| icon | 否 | String 或 Boolean | 菜单的图标 | 填入 true 不显示图标但是图标区留空 |
| children | 否 | MenuItem[] | 子菜单 |
BasePage 组件
用于渲染小程序 json 生成页面
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| pagedata | 是 | String | 小程序页面 json 的字符串 |
DocView 组件
用于自动渲染转码的 HTML
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| docContent | 是 | String | Markdown 转 HTML 内容 |
BaseCard 组件
卡片样式。
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| title | 是 | String | 卡片的标题 | |
| price | 是 | Number | 价格 | |
| desc | 是 | Array | 卡片详情 | 数组的每一项是卡片详情的每一项内容，支持 rawHtml |
| url | 是 | String | 卡片跳转的地址 |
BaseTimeAxis 组件
生成时间轴
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| timeList | 是 | TimeListItem[] | Markdown 转 HTML 内容 |
注意
※ 必须将该组件直接放置在 div.container 中! 否则会造成显示错乱。
- TimeListItem:
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| title | 是 | String | 时间线的标题 | |
| text | 是 | String | 时间线的段落文字 | 可输入 rawhtml，支持 \n 与连续空格 |
| icon | 否 | String | 时间线的图标 | 可输入 rawhtml |
| url | 否 | String | 点击当前选项卡跳转的地址 |
MyDoc 组件
用于自动生成 HTML 页面
| 属性 | 必填 | 类型 | 内容 |
|---|---|---|---|
| baselength | 是 | Number | MarkDown 基准路径字符数 |
BackTop 组件
一个返回顶部按钮，当滚动距离超过 300px 时显示会显示在右下角
LoadingIcon
一个自定义的齿轮加载图标
PasswordModal
密码弹出框
| 属性 | 必填 | 类型 | 内容 | 补充说明 |
|---|---|---|---|---|
| url | 是 | String | 验证地址 | 填入绝对路径，不需要填写 php 文件后缀名 |
| userNameKey | 否 | String | 用户名的自动填充键值 | 填写后会提示输入用户名，默认不输入 |
| passwordKey | 否 | String | 密码的自动填充键值 | 默认为 password |