UI 框架-Card 组件

最后，制作一下在展示的时候，用来区分各个用例的 Card 组件

---

需求分析

惯例先行需求分析

1. 应当允许用户自定义内容
2. 可以自定义颜色

那么可以整理出以下参数表格

参数	含义	类型	可选值	默认值
color	颜色	string	任意合法颜色值	#fe9acf

骨架

容易得到如下骨架

<template>
    <div class="laby-card" :style="{ '--color': color }">
        <slot></slot>
    </div>
</template>

功能

先 ts 声明

declare const props: {
    color: string;
};

然后在 export default 中，写入我们的参数

export default {
    name: "LabyCard",
    props: {
        color: {
            type: String,
            default: "#fe9acf",
        },
    },
};

样式表

然后补全样式表

.laby-card {
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px var(--color);
    padding: 12px;
    background: white;
}

测试

引入文档页看一下

// src/components/Card.vue
<template>
<div>Card 文档</div>
<laby-card color="#999">一些可能存在的卡片内容</laby-card>
</template>
<script lang="ts">
    import LabyCard from "../lib/Card.vue";
    export default {
        components: {
            LabyCard,
        },
    };
</script>

效果如图

---

感谢阅读