1.3.3 • Published 2 years ago
neumedia-article-list-item-m v1.3.3
移动端文章列表项
移动端H5页面文章列表项,单大图、左图右文、左文右图、三小图、纯标题。
本组件可配合其他组件使用。
更新历史
版本号 | 作者 | 更新记录 | 更新时间 |
---|---|---|---|
1.0.0 | huang.liang@neusoft.com | 初始版本 | 2020.08.18 |
安装
npm install neumedia-article-list-item-m
导入
import ArticleListItemM from 'neumedia-article-list-item-m';
export default {
components: {
ArticleListItemM
}
}
使用
<article-list-item-m
type="left-image"
title="提供多种图片填充模式,支持图片懒加载"
image="http://tbwysx.cn/test/yaochun.jpeg"
:gallery="[
'http://tbwysx.cn/test/yaochun_1.jpeg',
'http://tbwysx.cn/test/yaochun_2.jpeg',
'http://tbwysx.cn/test/yaochun_3.jpeg'
]"
></article-list-item-m>
API
Props
说明 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 展示格式类型 | String | 'big-image' |
title | 标题 | String | '' |
image | 图片url | String | '' |
gallery | 图集 | Array | [] |
max-title-line | 显示标题行数 | Number | 0 |
title-pos | 标题位置 | String | up |
image-cols | 图片宽度,总宽度为24 | Number | 8 |
type
取值范围,展示格式类型
值 | 说明 |
---|---|
big-image | 单张大图 |
left-image | 左图右文 |
right-image | 左文右图 |
gallery | 一行三图 |
text | 纯标题 |
title-pos
取值范围
值 | 说明 |
---|---|
up | 标题在图片上(只对单张大图 或一行三图 生效) |
down | 标题在图片下(只对单张大图 或一行三图 生效) |
none | 隐藏标题(对除纯标题 之外生效) |
Slots
名称 | 说明 |
---|---|
image | 自定义封面图片 |
mask | 自定义封面图遮罩(只对大图、左图、右图生效,对三图不生效)<div style="position: absolute; top: 0; right: 0;">实现定位</div> |
title-icon | 自定义标题前的小图标 |
left-extra | 左侧附加信息 |
right-extra | 右侧附加信息 |
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.2.9
2 years ago
1.2.8
3 years ago
1.2.7
3 years ago
1.2.6
3 years ago
1.2.5
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.0
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.1.0
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.3
4 years ago
1.0.0
4 years ago