11 - Vue3 UI Framework - Card 元件

Jeremy.Wu發表於2021-12-21
VueUIFramework元件

卡片是非常常用也是非常重要的元件，特別是在移動端的眾多應用場景中，隨便開啟一個手機 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 引入到測試文件中預覽一下效果：

card

專案地址 ?

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

官網地址 ?

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕

相關文章