组件使用说明

Mr.Hope ... Vue
大约 5 分钟

Mr.Hope 已为 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 九宫格的标题
foot String 九宫格的页脚文字
  • GirdItem
属性 必填 类型 内容
icon String 图标地址
text String 文字
url String 跳转链接

# BaseFoot

页脚

属性 必填 类型 内容 补充说明
desc String 页脚额外描述文字
author String 作者 默认为 Mr.Hope,如需取消请传入 ''
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 电话号码

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

网页导航栏

# Slide 组件

网页侧边栏

网页页脚

# 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