Vue3從0到1組件開發-佈局組件：Card卡片

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

新的部分

前言

從本章開始，將進入到組件開發的新的篇章，也從這一章，將再也不過多的粘貼常規的佈局代碼、樣式代碼，邏輯部分的代碼也主要是補充以前沒有提到過的一些點，以及一些重要的邏輯代碼部分。

文章中沒有提到的部分能夠經過查看我專門建立的專欄: Vue3從0到1組件開發。

主要的邏輯部分會詳細的分享其存在的主要做用，以及適用場景， 非必要的狀況下呢，也不會貼出詳細的代碼了。

若是對組件感興趣的小夥伴能夠本身嘗試開發， 不知道如何下手也能夠查看專欄中的基礎組件進行入門學習，或者評論留下你的有疑問，看到以後會及時回覆。

Card卡片的做用

相信很多有過開發經歷的小夥伴都或多或少用過市面上比較著名的幾個組件庫，如elements、Vant等，能夠看到，再完整的組件庫基本都有提供這樣一個組件，組件結構也比較簡單。

以element舉例，一個卡片組件基本由三大部分組成：head頭部,content內容,button操做按鈕。

在實際開發中，卡片組件也多用於展現主體內容，如文章列表、新聞列表等高度重複的內容。

Card卡片的開發

結構部分

結構部分比較簡單，參照element組件庫的樣式做爲參考，固然也能夠根據本身的業務需求去設計大致結構，只要具有通用性便可。

這裏給出一個大概的結構，能夠自由發揮

<template lang="pug">
block content
main.yx-card
    header.yx-card-header
        p.yx-card-header-content
        div.yx-card-header-btn
            slot(v-if="!icon")
            yx-icons(v-else :type="icon")
    div.yx-card-content
</template>
複製代碼

pug語法看這裏

不過結構比較簡單，相信你們即使不去看pug語法也能理解這段代碼。

主要邏輯

這裏關於主要邏輯部分須要考慮的第一個問題，跳轉到詳情頁，或者說跳轉到指定界面，

因此須要接受一個url參數，並添加點擊事件，若是存在url值，便跳轉到指定界面。

再考慮一下是否須要動畫效果等就行， 這裏也簡單的列舉下主要代碼。

<script setup>
import {defineProps, defineEmit} from 'vue';
import yxIcons from '../icons/index'; // 自定義的圖標組件，能夠在專欄中找到

cosnt props = defineProps({
    url: String
    ... // 其餘參數，
})

const clickLink = () => {
    if(!props.url) return;
    
    code
    // 根據項目狀況進行跳轉
}
</script>
複製代碼

若是隻是指望開發一個常規的卡片組件， 寫完這些基本的邏輯部分即可以正常使用了。

可是若是參考Element組件庫的話，這裏還須要考慮鼠標通過的動畫，給用戶以反饋，提升用戶友好度。

以及以圖片爲主要內容的佈局。

這裏能夠給到一個type的傳參來控制。

const props = defineProps({
    type: {
        validator: value => ['card','img'].includes(value),
        default: 'card'
    }
})
複製代碼

如上代碼部分， 寫個驗證器控制傳入值，若是參數爲'img'時，調整對應的類名以及樣式代碼就能夠了。

最後

寫的匆忙，來不及截屏作演示了，你們能夠參考element組件庫的card組件

可是不建議初學者直接看element組件的源碼，有點難頂，能夠先本身嘗試開發，若是想深刻學習完善的話， 建議你們能夠看看iviewui，relaxPlus等組件庫的源碼，比較簡單，尤爲推薦relaxPlus組件庫， 代碼是基於Vue3的setup開發的，可是並不是如我這般，直接使用setup-script語法來完成，可是也是對初學者比較友好的了。