这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战javascript

新的部分

前言

从本章开始，将进入到组件开发的新的篇章，也从这一章，将再也不过多的粘贴常规的布局代码、样式代码，逻辑部分的代码也主要是补充以前没有提到过的一些点，以及一些重要的逻辑代码部分。html

文章中没有提到的部分能够经过查看我专门建立的专栏: Vue3从0到1组件开发。vue

主要的逻辑部分会详细的分享其存在的主要做用，以及适用场景，非必要的状况下呢，也不会贴出详细的代码了。java

若是对组件感兴趣的小伙伴能够本身尝试开发，不知道如何下手也能够查看专栏中的基础组件进行入门学习，或者评论留下你的有疑问，看到以后会及时回复。git

Card卡片的做用

相信很多有过开发经历的小伙伴都或多或少用过市面上比较著名的几个组件库，如elements、Vant等，能够看到，再完整的组件库基本都有提供这样一个组件，组件结构也比较简单。api

以element举例，一个卡片组件基本由三大部分组成：head头部,content内容,button操做按钮。markdown

在实际开发中，卡片组件也多用于展现主体内容，如文章列表、新闻列表等高度重复的内容。app

Card卡片的开发

结构部分

结构部分比较简单，参照element组件库的样式做为参考，固然也能够根据本身的业务需求去设计大致结构，只要具有通用性便可。iview

这里给出一个大概的结构，能够自由发挥ide

<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语法来完成，可是也是对初学者比较友好的了。

Vue3从0到1组件开发-布局组件：Card卡片

新的部分

前言

Card卡片的做用

Card卡片的开发

结构部分

主要逻辑

最后