更新记录

1.2(2020-04-16) 下载此版本

1.增加Tag标签 2.优化不兼容微信小程序的 3.优化点赞等功能的显示

1.0(2020-03-23) 下载此版本

V1.0 第一次版本


平台兼容性

list-card卡片

完全使用View布局的方式修饰,组件名:list-card,代码块: card

使用方法

在需要使用的页面中引入:

import card from '@/components/list-card/list-card.vue'
export default {
    components: {card}
}`

在视图中使用

<card :cardinfo="cardinfo"></card>

属性说明

cardinfo(object),需包含以下属性:

属性名 类型 说明
authImg string 头像
authName string 昵称
tag string 标签
createTime string 发布时间
content string 内容
goodNum int 点赞数量
likeNum int 喜欢数量
commentNum int 评论数量
leave int 等级

属性示例:

cardinfo: {
        "authImg": '图片地址', 
        "authName": "张三",
        "createTime": "2020-02-01",
        "content": " 内容",
        "goodNum": "100",
        "likeNum": "200",
        "commentNum": "500",
        "leave": 8,
        "tag":"每日随笔"
           }

完整使用示例:

<template>
    <div class="test-component">
        <card :cardinfo="cardinfo"></card>
        <card :cardinfo="cardinfo"></card>
        <card :cardinfo="cardinfo"></card>
        <card :cardinfo="cardinfo"></card>
        <card :cardinfo="cardinfo"></card>
    </div>
</template>

<script>
    import card from '@/components/list-card/list-card.vue'
    export default {
        components: {
            card
        },
        data() {
            return {
            cardinfo: {
        "authImg": ''图片地址', 
        "authName": "张三",
        "createTime": "2020-02-01",
        "content": " 内容",
        "goodNum": "100",
        "likeNum": "200",
        "commentNum": "500",
        "leave": 8,
        "tag":"每日随笔"
           }
        };
        },
        methods: {
            onClick: function(e) {
                console.log('onClick');
            }
        },
    }
</script>

<style>

</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问