openblog

Appearance

vue笔记（四）： card卡片组件 ​

图片

卡片组件

思路

因为卡片实现太简单了，所以思路，就。。。不写了

但是，自定义的props参数还是要说一下，

我这边自定义配置参数有：

size：图片的宽高：默认是跟随父级节点的100%宽度

load:是图片默认的占位图路径

src：图片的路径

error：图片加载错误时的占位图片路径

title：文本标题

text：文本内容

图片这个是我用的另外封装的图片组件，后面会写图片组件的文章

开始写

新建card.vue

html
<template>
    <div class="card">
        <image :width="size" :height="size" :src="src" :load="load" :error="error"></image>
        <div class="card-title">{{title}}</div>
        <div class="card-text">{{text}}</div>
    </div>
</template>

<script>
    export default {
        name: 'Card',
        props: {
            size: {
                type: String,
                default: '100%'
            },
            load: {
                type: String
            },
            src: {
                type: String,
                default: ''
            },
            error: {
                type: String
            },
            title: {
                tyle: String,
                default:'标题'
            },
            text: {
                tyle: String,
                default:'这是文本内容'
            }
        }
    }
</script>

<style scoped>
    .card{
        box-sizing: border-box;
        border-radius: 5px;
        padding-bottom: 20px;
        box-shadow: 1px 1px 7px 0 #eee;
    }
     .card-title{
        color: #333333;
        font-size: 1rem;
        margin-top: 10px;
        text-align: center;
        padding: 0 15px;
    }
    .card-text{
        box-sizing: border-box;
        text-align: left;
        margin-top: 10px;
        color: #999999;
        font-size: 0.8rem;
        padding: 0 15px;
    }
</style>
<template>
    <div class="card">
        <image :width="size" :height="size" :src="src" :load="load" :error="error"></image>
        <div class="card-title">{{title}}</div>
        <div class="card-text">{{text}}</div>
    </div>
</template>

<script>
    export default {
        name: 'Card',
        props: {
            size: {
                type: String,
                default: '100%'
            },
            load: {
                type: String
            },
            src: {
                type: String,
                default: ''
            },
            error: {
                type: String
            },
            title: {
                tyle: String,
                default:'标题'
            },
            text: {
                tyle: String,
                default:'这是文本内容'
            }
        }
    }
</script>

<style scoped>
    .card{
        box-sizing: border-box;
        border-radius: 5px;
        padding-bottom: 20px;
        box-shadow: 1px 1px 7px 0 #eee;
    }
     .card-title{
        color: #333333;
        font-size: 1rem;
        margin-top: 10px;
        text-align: center;
        padding: 0 15px;
    }
    .card-text{
        box-sizing: border-box;
        text-align: left;
        margin-top: 10px;
        color: #999999;
        font-size: 0.8rem;
        padding: 0 15px;
    }
</style>

调用

js
<div style="padding:200px;width: 200px;">
    <Card title="我是标题" text="我是文本内容,我是文本内容，我是文本呃逆荣"></Card>
</div>
<div style="padding:200px;width: 200px;">
    <Card title="我是标题" text="我是文本内容,我是文本内容，我是文本呃逆荣"></Card>
</div>

运行结果

图片

我没有配置src图片，所以显示的是默认设置的图片占位图

本文到此结束。

反馈信息 ​

INFO

邮箱： open_teams@163.com