This is the 6th day of my participation in the August More Text Challenge

Continuing from the above, with the basic principle of each doing its job clear, we are ready to design our first component

In the course, Moon Cinema elaborated the realization and reconstruction of Slider for us. With the step by step optimization and upgrading of code and structure, the author’s cognition of components also improved accordingly

Combined with what the teacher said, we can turn the knowledge into application by manually completing a vue3 rotation map plug-in

Read this note and you will learn:

  1. Component Design Idea
  2. Knowledge of Vue components
  3. A simple multicast component in Vue3

3 Component Design

First paste the big code link of moon shadow, then we will modify the JS wheel map to vuE3 version

3.1 Design Principles

I believe that you are familiar with the wheel broadcast graph, so its functional design is no longer described, we mainly talk about the design of a component in VUE3

First, we should uphold the following principles:

  • Principle of naming: attribute/method names should be accurate and unambiguous. Abbreviations/Chinese spelling/unclear meanings should not be used
  • Method rule: Component methods should be atomic, with one operation for each method (and separate reads and writes in extreme cases)

Once the principles are determined, we start to write code, and I will design it as follows:

  1. Vue2 writing
  2. Vue3 writing
  3. Vue3 writing Update (Object-oriented)

3.2 vue2 writing

In vue2, according to the round figure function, we need to design of component name/props/data/the methods… , etc.

Let’s start with the code. This component is called Carouselone.vue

Let’s first determine the name and props:

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'CarouselOne'.props: {
    images: {
      type: Array as PropType<string[]>,
      required: true
    },
    cycle: {
      type: Number.default: () = > {
        return 3000; }}}});Copy the code

Images is an Array of image linked strings, which we wrote as vue2 but is actually vue3+ts, so we need to specify its type using Array as PropType
[]>

Cycle stands for interval time, which is similar to the big code of moon shadow

Next we write data:

interface CarouselData {
  selectedIndex: number;
  timer: number | undefined;
}

export default defineComponent({
  data() {
    return {
      selectedIndex: 0.timer: undefined
    } asCarouselData; }})Copy the code

SelectedIndex is the currently selectedIndex of the multicast graph. The default value is 0

Timer is a timer used to implement the rotation effect

Interface CarouselData interface CarouselData interface CarouselData interface CarouselData

When the timer does not exist at the beginning, the type is undefined, and the type is number after creation. There is no way to define this type in data, and we absolutely do not write AnyScript, so use the AS keyword to manually declare the type of the attribute in data

Now I’m going to get to the most important part,methods

Reading the big code of moon shadow, we implement each atomization method one by one:

export default defineComponent({
    methods: {
        getSelectedItemIndex(): number {
          return this.selectedIndex;
        },
        getSelectedItem(): string {
          return this.$props.images[this.selectedIndex];
        },
        slideTo(index: number) :void {
          this.selectedIndex = index;
        },
        slidePrevious(): void {
          this.slideTo(
            (this.$props.images.length + this.selectedIndex - 1) % this.$props.images.length
          );
        },
        slideNext(): void {
          this.slideTo((this.selectedIndex + 1) % this.$props.images.length);
        },
        stop(): void {
          clearInterval(this.timer);
        },
        start(): void {
          this.stop();
          this.timer = setInterval(() = > this.slideNext(), this.$props.cycle); }}})Copy the code

Once the TS code is done, it’s time to switch to page element responsibilities, which are my weak points

The template and Render methods in VUe3 are similar in performance.

<template>
  <ul>
    <template v-for="(image, index) in images" :key="index">
      <li v-show="index === selectedIndex">
        <img :src="image" />
      </li>
    </template>
  </ul>
</template>
Copy the code

Finally, call the start method to start the rotation after the component is loaded. The final component is:

<template>
  <ul>
    <template v-for="(image, index) in images" :key="index">
      <li v-show="index === selectedIndex">
        <img :src="image" />
      </li>
    </template>
  </ul>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';

interface CarouselData {
  selectedIndex: number;
  timer: number | undefined;
}

export default defineComponent({
  name: 'CarouselOne'.props: {
    images: {
      type: Array as PropType<string[]>,
      required: true
    },
    cycle: {
      type: Number.default: () = > {
        return 3000; }}},data() {
    return {
      selectedIndex: 0.timer: undefined
    } as CarouselData;
  },
  methods: {
    getSelectedItemIndex(): number {
      return this.selectedIndex;
    },
    getSelectedItem(): string {
      return this.$props.images[this.selectedIndex];
    },
    slideTo(index: number): void {
      this.selectedIndex = index;
    },
    slidePrevious(): void {
      this.slideTo(
        (this.$props.images.length + this.selectedIndex - 1) % this.$props.images.length
      );
    },
    slideNext(): void {
      this.slideTo((this.selectedIndex + 1) % this.$props.images.length);
    },
    stop(): void {
      clearInterval(this.timer);
    },
    start(): void {
      this.stop();
      this.timer = setInterval(() = > this.slideNext(), this.$props.cycle); }},mounted() {
    this.start(); }});</script>
<style scoped></style>
Copy the code

In the next article, we will update the vue2 method and use the setup method to make the component structure clearer