This is the ninth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

The new part

preface

Starting with this chapter, you will enter a new chapter of component development. From this chapter, there will be no more pasting of regular layout code, style code, and the logical part of the code is mainly to supplement some points not mentioned before, as well as some important parts of the logical code.

For the parts not covered in this article, check out the column I created specifically: Vue3 0 to 1 Component Development.

The main logic section will share in detail the main purpose of its existence and the applicable scenarios, and will not post detailed code if it is not necessary.

If you are interested in components, you can try to develop them yourself. If you don’t know how to start, you can also check out the basic components column to learn how to get started, or leave your questions in the comments, and you will reply as soon as you see them.

Card

It is believed that many people with development experience have more or less used several well-known component libraries in the market, such as Elements, Vant, etc. It can be seen that the complete component library basically provides such a component, and the component structure is relatively simple.

In the case of Element, a card component basically consists of three parts: head, Content, and Button.

In practice, card components are also used to display body content, such as lists of articles, news lists, and other highly repetitive content.

Card Card development

The structural part

The structure part is relatively simple, referring to the style of the Element component library as a reference, of course, you can also design the general structure according to your own business needs, as long as it has the versatility.

Here is a general structure, and you can play with it

<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>
Copy the code

Pug syntax here

However, the structure is relatively simple, and I believe you can understand this code without looking at puG syntax.

The main logic

The first thing to consider here about the main logic is to go to the details page, or to the specified interface,

So you need to accept a URL parameter, add a click event, and if there is a URL value, jump to the specified interface.

Again consider whether you need animation effects and so on, here is also a simple list of the main code.

<script setup>
import {defineProps, defineEmit} from 'vue';
import yxIcons from '.. /icons/index'; // The custom icon component can be found in the column

cosnt props = defineProps({
    url: String.// Other parameters,
})

const clickLink = () = > {
    if(! props.url)return;
    
    code
    // Jump according to the project
}
</script>
Copy the code

If you’re just looking to develop a regular card component, write these basic logical parts and you’re ready to use them.

But if you’re referring to the Element component library, you also need to consider mouseover animations to give the user feedback and improve user friendliness.

And a layout with images as the main content.

This can be controlled by passing a type parameter.

const props = defineProps({
    type: {
        validator: value= > ['card'.'img'].includes(value),
        default: 'card'}})Copy the code

In the code above, write a validator to control the value passed in. If the parameter is ‘img’, adjust the corresponding class name and style code.

The last

I wrote it in such a hurry that I didn’t have time to take screenshots for the demonstration, so you can refer to the Card component of the Element component library

However, it is not recommended for beginners to directly look at the source code of the element component, which is a bit difficult, so you can try to develop it yourself first. If you want to further study and improve it, you can look at the source code of iviewui, relaxPlus and other component libraries, which are relatively simple. RelaxPlus is especially recommended. The code is based on Vue3’s setup, but not directly using setup-script syntax, as I did, but it’s still beginner friendly.