neumedia-article-list-item-m

移动端H5页面文章列表项,单大图、左图右文、左文右图、三小图、纯标题。
553
Install
npm install neumedia-article-list-item-m
Latest Version:1.3.3
Vue:2
Last Updated:May 14, 2022
Links: npm
Maintainer: hliang-321

移动端文章列表项

移动端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 右侧附加信息

Version History

Version Released Vue License
1.3.3 ^2.6.11
1.3.2 ^2.6.11
1.3.1 ^2.6.11
1.2.9 ^2.6.11
1.2.8 ^2.6.11