neumedia-article-list-item-m
v1.3.3
Published
移动端H5页面文章列表项,单大图、左图右文、左文右图、三小图、纯标题。
Downloads
32
Readme
移动端文章列表项
移动端H5页面文章列表项,单大图、左图右文、左文右图、三小图、纯标题。
本组件可配合其他组件使用。
更新历史
| 版本号 | 作者 | 更新记录 | 更新时间 | | ------ | ----------------------- | -------- | ---------- | | 1.0.0 | [email protected] | 初始版本 | 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 | 右侧附加信息 |