Info-list 信息列表

信息列表组件,支持图文列表,纯文字列表。

注意事项

  • type为imgleft为左图右文结构,type为imgright为右图左文结构,type为text为纯文本结构。

效果

使用方法

<template>
<div class="wrap">
<lc-title title="信息列表"></lc-title>
<category title="图文结合"></category>

<lc-info-list
type="imgleft"
:infoList="infoList"
@infoClick="infoClick"
></lc-info-list>

<lc-info-list
type="imgright"
:infoList="infoList"
:timeStyle='timeStyle'
@infoClick="infoClick"
></lc-info-list>

<category title="纯文本"></category>
<lc-info-list
type="text"
:infoList="infoList1"
@infoClick="infoClick"
></lc-info-list>

<lc-info-list
type="text"
:line="2"
:infoList="infoList1"
@infoClick="infoClick"
></lc-info-list>
</div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
components: { LcTitle, Category },
data(){
return {
timeStyle:{textAlign:'left'},
infoList:[
{
textTitle:'金点子提醒:京东开始全面升级到电子发票,让电子发票引领未来',
textInfo:'今年以来,虽然A股上涨了6.1(截止发稿前),但是境外资金持续走弱但是境外资金持续走弱但是境外资金持续走弱',
src:'images/TB1jkA5g9_I8KJjy0FoXXaFnVXa-320-320.png',
textTime:'2018-02-09'
}
],
infoList1:[
{
textTitle:'金点子提醒:京东开始全面升级到电子发票,让电子发票引领未来金点子提醒:京东开始全面升级到电子发票,让电子发票引领未来',
textTime:'2017-12-18 15:01:23',
textInfo:'今年以来,虽然A股上涨了6.1(截止发稿前),但是境外资金持续走弱但是境外资金持续走弱但是境外资金持续走弱'
}
]
}
},
components: { LcTitle, Category},
methods:{
infoClick(index) {
console.log("clicked" + index);
}
}
}
</script>

<style scoped>
.wrap{ background: #fff;}
</style>

可配置参数

Prop Type Required Default Description
type enum Y text 类型:imgleft/ imgright/text
infoList Array Y [] 字段:消息标题textTitle/ 消息内容textInfo/消息时间textTime/图片地址src
line Number N 1 显示行数(注1)
imgStyle Object N - 覆盖图片样式
titleStyle Object N - 覆盖标题样式
infoStyle Object N - 覆盖内容样式
timeStyle Object N - 覆盖时间样式
  • 注1:图文结合标题最多显示一行,纯文本标题最多显示两行

事件回调

// `@infoClick="infoClick"`
将会返回 e, type