preface

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

1, Meaning of encapsulation

• There are many places to be used in the project
• Modular development reduces code redundancy and makes development more efficient
• Once packaged, used everywhere

2, How to package?

1. Ideas

• The v-model in vue3 is used to transfer values between parent and child components. This article uses the useVModel encapsulated in vueuse/core to realize this function
• Throw the value to be controlled out of the encapsulated public component

2. Preparation

• Installation dependency
  Open any terminal under the project root directory and execute npm install @vueuse/core@5.3.0

• Encapsulate global components
  As in the previous article, it is registered as a global component through vue plug-in

Note: in this paper, the encapsulated global components are placed under src/components, and each partner can decide the file location and name by themselves

New file my-numbox.vue
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 control data based on third-party method
    const num = useVModel(props, 'modelValue', emit)
    // Control the change operation of commodity data
    const toggle = (n) => {
      if (n < 0) {
        // Minus 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>

The steps of registering as a global component through vue plug-in will not be demonstrated here. You can take a look at the previous articles
vue3 -- realize the magnifying glass effect by yourself

2. Use

It can be used in any file ending in. vue

The code is as follows (example):
The content of the component label overrides the content in the default slot in the public component
Inventory is the inventory quantity, that is, the maximum value that users can select (here is a fixed value to demonstrate to you)

<template>
  <div class="home-banner">
    <MyNumbox v-model="num" :inventory="5">number:</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 requirements have been realized. When the maximum or minimum value is reached, click the button to disable it.

summary

If you think it's helpful to you, just click on my home page to see other articles~