11 - Vue3 UI Framework - Card 組件

卡片是非常常用也是非常重要的組件，特別是在移動端的衆多應用場景中，隨便打開一個手機 App ，您會發現充斥着各種各樣的卡片。

所以，我們也來製作一個簡易的 Card 組件

返回閱讀列表點擊 這裏

需求分析

我們先做一個簡單的需求分析

1. 允許用戶自定義內容
2. 允許更換顏色

那麼可以整理出以下參數表格

參數	含義	類型	可選值	默認值
color	顏色	string	任意合法顏色值	#d3c8f5

骨架

所以很容易能夠得到如下骨架代碼：

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

注意

這裏我們放置一個 slot 插槽就行了，用戶可以根據需要個性化設置 Card 主題的內容！

功能

首先，我們在 typescript 中聲明屬性

declare const props: {
  color: string;
};

然後，再在 export default 中寫入參數：

export default {
  install: function (Vue) {
    Vue.component(this.name, this);
  },
  name: "JeremyCard",
  props: {
    color: {
      type: String,
      default: "#8c6fef",
    },
  },
};

樣式表

最後，我們再補全樣式表：

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

測試

我們將 JeremyCard 引入到測試文檔中預覽一下效果：

項目地址 🎁

GitHub: https://github.com/JeremyWu917/jeremy-ui

官網地址 🌍

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕