preface

As a depth (old), and the pursuit of the fixed (but) the front end of the developer, we must have thought through the component library source code Element (in this chapter, for example) to the high level, also must have tried, but failed, this is normal, I also am such 😭, until now also only saw 1/6 🙃, Again, the simplest components. In fact (for general skills for us) look at the source code is the need for method and time: about time, I think every week to see a component is enough (do not have to read all, pick to see the line), see their own arrangements; Methods are the main thing I’m going to talk about next, using the Button component as an example (because it’s the simplest and most useful), and hopefully you’ll get some inspiration after reading it. One important thing to note before looking at the source code is that you should have used a component library such as Element. It is important to learn how to use it first, and then to learn how it works.

Oh, right, chicken soup, in fact, the source code of this thing just sounds mysterious, look confused, but you want to be a little familiar with it, it becomes very transparent, as you 🔪 slaughtered (interpretation). A lot of things just we usually touch less, because it is strange so it feels difficult. Think of the components we usually write during the development process, that is also source ah, but the writing may not be as good is 😭😭😭.

Element source address: github.com/ElemeFE/ele… IO /#/ zh-cn /com…

About the catalogue

Because the focus of this article is to explain the specific ideas of the component, as long as you know where the source of the component is on the line, so the overall directory will not say, of course, interested students can look at the following 👇 this article:

Related good article 😬 : based on vue-cli3 to create their own UI library

What do you think

Here first briefly say I see component source code method, only for your reference, do not like to spray ha 🙄. First of all, Element has several versions. I looked at the Vue based version, so each component is a Vue file, just like the code we usually write, write a Vue component, and then introduce it in the page we need. But it’s more important to know how to write the component well (is it robust, extensible, maintainable, etc.). A VUE component can generally be divided into three parts: template, Script, and style. We don’t care about style here, just refer to the style of Element in the page, because that’s not our main concern, just know that the style of Element is usually named like this (el-component name — state, such as el-button–primary). Therefore, we did not write the style part in the component, which can save us a lot of time and energy.

// Introduce the Element style directly into the page
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
Copy the code

Look at the Template section first

So let’s look at the template part first. This part is actually quite simple (😁 for this component). We can first open the Element document to see the appearance of the button and then write this part, which looks like this:

Ok, assuming that you have seen most of the appearance of the Button component, now we can think about it in our mind (pull it out and simplify it)htmlThe common part of the structure), probably onedivThere’s one inside the button tagiIcon andspanThe structure of the text, well it seems so, try to write it! Tip: Element components generally use the outermost styleEl - component nameWrapped up)

<template>
  <button class="el-button">
    <i></i>
    <span></span>
  </button>
</template>
Copy the code

Look at the above structure like that, also simple and clear. But then 😯… Then there is our script section, which is the soul of the component, the most important part, and the part we need to chew on. Fortunately, this component is simple, so let’s move on.

Let’s look at script

When we look at this part, we may not know where to start, but there’s a little bit of a clue. 👏👏👏… Any component has three important components: props, Event, and Slot. These components are the bridge between the internal and external components and make them flexible. So these three apis must be conceived and determined before release, because it will be very difficult to change later, and it will probably be a stretch. However, this should not be the case. It should be possible to extend and add functionality without affecting or changing the original API. Ok 👌, let’s talk about it one by one 👇. Take a look at the props section. You need to visualize in your mind what elements of the Button component are mutable (depending on the need for external parameters to change). . 1) The most obvious color is the background color of the button, which is obviously variable. 2) Is there an icon? 3) Disabled 4) There are no round corners. 5) The size is also changeable. 6) Buttons can look like text. . Ok, so let’s try to write the props section! (Note: The props section is better written as an object, so that each property can be customized and is more formal than an array.)

<script>
export default {
  props: {
    type: {
      type: String.default: ' '
    },
    size: {
      type: String.default: 'medium'
    },
    icon: {
      type: String.default: ' '
    },
    disabled: Boolean.plain: Boolean.round: Boolean}}</script>
Copy the code

If you don’t know how to use slot, you can go to ✋. Obviously, for the button component, the text is slot, so the contents of the template can be modified as follows:

<template>
  <button class="el-button">
    <i></i>
    <span><slot></slot></span>
  </button>
</template>
Copy the code

If the button is clicked, it will trigger an event that will emit $emit. If the button is clicked, it will emit $emit. So we add the event to the component as follows:

<template>
  <button
    class="el-button"
    @click="handleClick">
    <i></i>
    <span><slot></slot></span>
  </button>
</template>
<script>
export default {
  props: {... },methods: {
    handleClick (e) {
      this.$emit('click', e); }}}</script>
Copy the code

As if there were only so many parts of the Event, well, yes, it’s easier than expected ✊…

Look at the Template section

You thought the component was finished, no, it wasn’t. You don’t think the template is empty, and the props properties aren’t used yet, so we need to work on some things… For example, in the slot section, we can get the contents of the slot with $slot. default, but we need to make a judgment here, because the user might not have passed the text, so we don’t need to render; For example, the part of icon I, like slot, is rendered only when there is a value passed, so we also add a judgment (here the value of icon is el-icon- icon name format).

<template>
  <button
    class="el-button"
    @click="handleClick">
    <i :class="icon" v-if="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
Copy the code

Properties of props are used to control style changes, such as type, size, round, disabled, plain, etc. So let’s add some classes to the component.

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="disabled"
    :class="[ type ? 'el-button--' + type : '', size ? 'el-button--' + size : '', { 'is-disabled': disabled, 'is-plain': plain, 'is-round': round } ]">
    <i :class="icon" v-if="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
Copy the code

So far we have written a relatively complete button component, does not give a person such a simple feeling, although it is not perfect, but also covered the source of 90% of the part, the rest of the 10% you can go to supplement. In fact, the main component or to see you 🤔 thinking 🤔 have more comprehensive, think more write more.

conclusion

With this in mind, there is a straightforward way to look at the source code for Element’s other components (it should be easier 😂). Of course, this is just a role of a primer, mainly because the button is really simple and practical, very suitable for the role of the door-stepping, of course, maybe see other complex components behind you will not think so 😝. But after all, a good beginning is half the battle. The revolution is not yet complete, and comrades still have to work hard. Pull up sleeves to refuel dry 💪!!