UI 框架-Card 组件

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


需求分析

惯例先行需求分析

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

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

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

骨架

容易得到如下骨架

1
2
3
4
5
<template>
<div class="laby-card" :style="{ '--color': color }">
<slot></slot>
</div>
</template>

功能

先 ts 声明

1
2
3
declare const props: {
color: string;
};

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

1
2
3
4
5
6
7
8
9
export default {
name: "LabyCard",
props: {
color: {
type: String,
default: "#fe9acf",
},
},
};

样式表

然后补全样式表

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

测试

引入文档页看一下

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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>

效果如图

效果图


感谢阅读

--It's the end.Thanks for your read.--