信息列表组件,支持图文列表,纯文字列表。
注意事项
- type为
imgleft
为左图右文结构,type为imgright
为右图左文结构,type为text
为纯文本结构。
效果
使用方法
<template>
<div class="wxc-demo">
<scroller>
<title title="lc-info-list"></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>
</scroller>
</div>
</template>
<script>
import Title from 'lighting-ui/packages/_mods/title.vue';
import Category from 'lighting-ui/packages/_mods/category.vue';
import LcInfoList from 'lighting-ui/packages/lc-info-list';
export default {
data(){
return {
timeStyle:{textAlign:'left'},
infoList:[
{
textTitle:'金点子提醒:京东开始全面升级到电子发票,让电子发票引领未来',
textInfo:'今年以来,虽然A股上涨了6.1(截止发稿前),但是境外资金持续走弱但是境外资金持续走弱但是境外资金持续走弱',
src:'https://img.alicdn.com/tfs/TB1jkA5g9_I8KJjy0FoXXaFnVXa-320-320.png',
textTime:'2018-02-09'
}
],
infoList1:[
{
textTitle:'金点子提醒:京东开始全面升级到电子发票,让电子发票引领未来金点子提醒:京东开始全面升级到电子发票,让电子发票引领未来',
textTime:'2017-12-18 15:01:23',
textInfo:'今年以来,虽然A股上涨了6.1(截止发稿前),但是境外资金持续走弱但是境外资金持续走弱但是境外资金持续走弱'
}
]
}
},
components: { Title, Category, LcInfoList},
methods:{
infoClick(index) {
console.log("clicked" + index);
}
}
}
</script>
可配置参数
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