Vue实现控制商品数量组件封装及使用

<template>    <div class="xtx-numbox">    <div class="label">      <slot />    </div>    <div class="numbox">      <a href="javascript:;" @click='toggle(-1)'>-</a>      <input type="text" readonly :value="num">      <a href="javascript:;" @click='toggle(1)'>+</a>    </div>  </div></template><script>import { useVModel } from '@vueuse/core'export default {  name: 'XtxNumbox',  props: {    modelValue: {      type: Number,      default: 1    },    inventory: {      type: Number,      required: true    }  },  setup (props, { emit }) {    // 基于第三方的方法控制数据的双向绑定    const num = useVModel(props, 'modelValue', emit)    // 控制商品数据的变更操作    const toggle = (n) => {      if (n < 0) {        // 减一操作        if (num.value > 1) {          num.value -= 1        }      } else {        // 加一操作        if (num.value < 10) {          num.value += 1        }      }    }    return { num, toggle }  }}</script><style scoped lang="less">.xtx-numbox {  display: flex;  align-items: center;  .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;      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>

<Numbox v-model='num' >数量</XtxNumbox>setup(){ // 商品的数量  // 默认值是1  const num=ref(1)  return {    num   }}