Using vue3 to implement counting function component encapsulation example

Preface
1. The significance of encapsulation
2. How to encapsulate?

1. Idea
2. Preparation
2. Use

3. Effect Demonstration

Summarize

Preface

This article will show you how to use vue3 to encapsulate a global component that implements the counting function. I believe you will know its application scenario at a glance, that is, the quantity selection module commonly used in shopping websites. Let's take a look at how to implement it.

1. The significance of encapsulation

There are many places where it is needed in the project
Modular development reduces code redundancy and makes development more efficient
Package once, use everywhere

2. How to encapsulate?

1. Idea

Use v-model in vue3 to complete the mutual value transfer between parent and child components. This article uses the encapsulated useVModel in vueuse/core to implement this function and throw the value to be controlled from the encapsulated public component.

2. Preparation

Install Dependencies

Open any terminal in the project root directory and execute npm install @vueuse/[email protected]

Encapsulating global components

As in the previous article, register it as a global component through the vue plug-in

Note: This article puts the encapsulated global components under src/components. You can decide the file location and name by yourself.

Create a new file my-numbox.vue file

The code is as follows (example):

<template>
  <div class="my-numbox">
    <div class="label">
      <slot>Quantity</slot>
    </div>
    <div class="numbox">
      <a href="javascript:;" @click="toggle(-1)" :class="{notallow: modelValue === 1}">-</a>
      <input type="text" readonly :value="num">
      <a href="javascript:;" @click="toggle(1)" :class="{notallow: modelValue === inventory}">+</a>
    </div>
  </div>
</template>
<script>
import { useVModel } from '@vueuse/core'
export default {
  name: 'MyNumbox',
  props: {
    modelValue: {
      type: Number,
      default: 1
    },
    inventory:
      type: Number,
      required: true
    }
  },
  setup (props, { emit }) {
    // Bidirectional binding of data controlled by a third-party method const num = useVModel(props, 'modelValue', emit)
    // Control the change operation of product data const toggle = (n) => {
      if (n < 0) {
        // Subtract one operation if (num.value > 1) {
          num.value -= 1
        }
      } else {
        // Add one operation if (num.value < props.inventory) {
          num.value += 1
        }
      }
    }
    return { num, toggle }
  }
}
</script>
<style scoped lang="less">
.my-numbox {
  display: flex;
  align-items: center;
  .notallow {
    cursor: not-allowed;
  }
  .label {
    width: 60px;
    color: #999;
    padding-left: 10px;
  }
  .numbox {
    width: 120px;
    height: 30px;
    border: 1px solid #e4e4e4;
    display: flex;
    > a {
      width: 29px;
      line-height: 28px;
      text-align: center;
      text-decoration: none;
      background: #f8f8f8;
      font-size: 16px;
      color: #666;
      &:first-of-type {
        border-right:1px solid #e4e4e4;
      }
      &:last-of-type {
        border-left:1px solid #e4e4e4;
      }
    }
    > input {
      width: 60px;
      padding: 0 5px;
      text-align: center;
      color: #666;
    }
  }
}
</style>

I won’t show you the steps to register as a global component through the Vue plugin here. You can read the previous article
vue3——realize the magnifying glass effect yourself

2. Use

Just use it in any file ending with .vue

The code is as follows (example):

The content of the component tag will override the content of the default slot in the public component

Inventory is the inventory quantity, that is, the maximum value that the user can choose (here is a fixed value for demonstration)

<template>
  <div class="home-banner">
    <MyNumbox v-model="num" :inventory="5">Number of items:</MyNumbox>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    const num = ref(1)
    return { num }
  }
}
</script>

<style lang="less">
.home-banner {
  margin: 100px auto;
  width: 500px;
  height: 100px;
}
</style>

3. Effect Demonstration

You can see that our needs have been met. When the maximum or minimum value is reached, clicking the button will disable it.

Summarize

This is the end of this article about using vue3 to implement the counting function component encapsulation example. For more relevant vue3 counting function component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue3 compilation process-source code analysis
Details of 7 kinds of component communication in Vue3
Detailed explanation of Vue3 encapsulation Message message prompt instance function
The difference and usage of Vue2 and Vue3 brother component communication bus
Vue3.0 implements the encapsulation of the drop-down menu
Vue3.0 implements encapsulation of checkbox components
Comparison of the advantages of vue3 and vue2
Practical record of Vue3 combined with TypeScript project development
Summary of Vue3 combined with TypeScript project development practice
Vue3 AST parser-source code analysis

<<: Mysql transaction concurrency problem solution

>>: Nginx compiled nginx - add new module