组件使用说明

Mr.Hope2020年6月3日
大约 5 分钟

Mr.Hope 已为 inNENU Website 开发了一些常规组件。本文介绍了这些组件的配置。

常规组件

提示

所有以 Base 开头的组件都包含如下属性:

| 属性 | 必填 | 类型 | 内容 | | ---- | :--: | :--------------: | --------- | --- | | myId | 是 | Number 或 String | 组件的 ID | |

以下是项目中中常用的组件。

BaseHead

页面标题文字

属性必填类型内容
titleString页面选项卡文字

BaseTitle

段落间大标题

属性必填类型内容补充说明
textString标题文字
myStyleString 或 Style标题自定义样式填入任意 css 样式

BaseP

段落文字(可带图)

属性必填类型内容补充说明
textString段落的文字可以识别连续的空格,使用 \n 表示回车,也可直接使用 <br /> 换行
headString段落的标题
headStyleString 或 Style标题自定义样式填入任意 css 样式
myStyleString 或 Style标题自定义样式填入任意 css 样式
srcString图片的路径会在段落后渲染一张图片
descString图片的描述文字会自动在文字前加

BaseImg

图片

属性必填类型内容补充说明
srcString图片的路径
descString图片的描述文字会自动在文字前加 ▲

BaseList

列表

属性必填类型内容补充说明
contentString列表内容
headString 或 Boolean列表的标题默认为 '',设置 false 取消显示列表标题,否则即使不设置也会显示一个空标题
footString列表的页脚文字默认为 '',不显示页脚

BaseGrid

九宫格

| 属性 | 必填 | 类型 | 内容 | | ------- | :--: | :---------------: | ---------------- | ------------------------------------------------------------------------------ | | content | 是 | GirdItem[] | 九宫格单元内容 | | head | 否 | String 或 Boolean | 九宫格的标题 | 默认为 '',设置 false 取消显示九宫格标题,否则即使不设置也会显示一个空标题 | | foot | 否 | String | 九宫格的页脚文字 | 默认为 '',不显示页脚 |

  • GirdItem
属性必填类型内容
iconString图标地址
textString文字
urlString跳转链接

BaseFoot

页脚

属性必填类型内容补充说明
descString页脚额外描述文字
authorString作者默认为 Mr.Hope,如需取消请传入 ''
timeString最后编辑时间

BaseCarousel

轮播图

属性必填类型内容补充说明
contentCarouselItem[]轮播图组件内容
verticalBoolean是否竖直显示默认为 false
autoplayBoolean是否支持自动播放默认为 true
autoplaySpeedNumber自动播放时间间隔默认为 3000
speedNumber切换速度默认为 500
dotDisplayBoolean是否显示指示点默认为 true
arrowDisplayBoolean是否显示切换箭头默认为 true
easingString切换动画默认为 easeInOutQuart
  • CarouselItem
属性必填类型内容补充说明
captionString轮播图的主标题请填入核心内容
subCaptionString轮播图的副标题主标题的进一步解释
srcString图片的路径所有轮播图图片长宽比例应该相同,推荐值 16: 9
urlString轮播图点击时的跳转路径支持相对路径绝对路径以及 http、https 链接
enSubheadString轮播图的英文副标题
altString图片失效时的显示文字不填会默认初始化为文字 轮播图背景
descString页面右下角补充说明仅在 large 及以上屏幕上显示
blackBoolean是否采用黑色文字默认文字色为白色

BasePhone

生成拨打电话提示,该组件仅为兼容小程序。

属性必填类型内容
numberString 或 Number电话号码

以下是以便复用的不常用组件

网页导航栏

Slide 组件

网页侧边栏

网页页脚

BaseMenu 组件

生成竖直菜单

属性必填类型内容
listMenuItem[]菜单内容
  • MenuItem
属性必填类型内容补充说明
keyString菜单项的标识符不可重复
titleString菜单的文字
iconString 或 Boolean菜单的图标填入 true 不显示图标但是图标区留空
childrenMenuItem[]子菜单

BasePage 组件

用于渲染小程序 json 生成页面

属性必填类型内容
pagedataString小程序页面 json 的字符串

DocView 组件

用于自动渲染转码的 HTML

属性必填类型内容
docContentStringMarkdown 转 HTML 内容

BaseCard 组件

卡片样式。

属性必填类型内容补充说明
titleString卡片的标题
priceNumber价格
descArray卡片详情数组的每一项是卡片详情的每一项内容,支持 rawHtml
urlString卡片跳转的地址

BaseTimeAxis 组件

生成时间轴

属性必填类型内容
timeListTimeListItem[]Markdown 转 HTML 内容

注意

※ 必须将该组件直接放置在 div.container 中! 否则会造成显示错乱。

  • TimeListItem:
属性必填类型内容补充说明
titleString时间线的标题
textString时间线的段落文字可输入 rawhtml,支持 \n 与连续空格
iconString时间线的图标可输入 rawhtml
urlString点击当前选项卡跳转的地址

MyDoc 组件

用于自动生成 HTML 页面

属性必填类型内容
baselengthNumberMarkDown 基准路径字符数

BackTop 组件

一个返回顶部按钮,当滚动距离超过 300px 时显示会显示在右下角

LoadingIcon

一个自定义的齿轮加载图标

PasswordModal

密码弹出框

属性必填类型内容补充说明
urlString验证地址填入绝对路径,不需要填写 php 文件后缀名
userNameKeyString用户名的自动填充键值填写后会提示输入用户名,默认不输入
passwordKeyString密码的自动填充键值默认为 password
评论
Powered by Waline v2.6.2