preface

This article will take you to use VUe3 itself to encapsulate a global component to achieve the counting function, its application scenario I believe you will know, that is the common quantity selection module in the shopping website, let’s see how to achieve wow

First, the meaning of encapsulation

  • The project needs to use more places
  • Modular development, reduce code redundancy, is more efficient development
  • One encapsulation, used everywhere

Two, how to package?

1. The train of thought

  • Using vue3v-modelTo complete the value transfer between parent and child components, this article usesvueuse/coreEncapsulated inuseVModelTo achieve this function
  • Throw the value you want to control from the encapsulated common component

2. Prepare

  • Install dependencies

Open any terminal in the root directory of the project and run NPM install@vueuse /[email protected]

  • Encapsulating global components

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

Note: This article places the global component wrapper under SRC /components. You can decide where and what to call the file

Create a new file my-numbox.vue with the following code (example) :

<template>
  <div class="my-numbox">
    <div class="label"> <slot> Number </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 based on third party methods to control data const num = useVModel(props,'modelValue', emit) // Control commodity data change operation const toggle = (n) => {if(n < 0) {// Subtract oneif (num.value > 1) {
          num.value -= 1
        }
      } else{// add oneif (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>

Copy the code

The steps to register as a global component through a VUE plug-in are not shown here, but you can take a look at the previous article vue3 – make your own magnifying glass effect

2. Use

Use it in any.vue ending file

The component label content overwrites the content inventory in the default slot in the common component. Inventory is the maximum number of inventory that the user can select.

<template>
  <div class="home-banner">
    <MyNumbox v-model="num" :inventory="5"</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>

Copy the code

Third, the effect demonstration

You can see that our requirements have been fulfilled, and when the maximum or minimum value is reached, click the button to disable it.

conclusion

If you find it helpful, click on my homepage to check out other articles