VUE.js不用脚手架封装一个<input-number>组件

下面是一个示例，展示如何在 Vue 3 中使用 CDN 引入 Vue.js 并创建一个简单的数字输入框组件：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CDN Vue 3 Component</title>
  <!-- 引入 Vue.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.20/dist/vue.global.min.js"></script>
</head>
<body>

<div id="app">
  <input-number v-model="quantity" :min="1" :max="10" :step="1"></input-number>
  <p>Selected quantity: {{ quantity }}</p>
</div>

<!-- 定义 InputNumber 组件模板 -->
<script>
  const app = Vue.createApp({
    data() {
      return {
        quantity: 1
      };
    }
  });

  app.component('input-number', {
    template: `
      <div>
        <button @click="decrement">-</button>
        <input type="number" :value="currentValue" @input="handleInput">
        <button @click="increment">+</button>
      </div>
    `,
    props: {
      modelValue: {
        type: Number,
        default: 0
      },
      min: {
        type: Number,
        default: -Infinity
      },
      max: {
        type: Number,
        default: Infinity
      },
      step: {
        type: Number,
        default: 1
      }
    },
    emits: ['update:modelValue'],
    data() {
      return {
        currentValue: this.modelValue
      };
    },
    watch: {
      modelValue(newVal) {
        this.currentValue = newVal;
      }
    },
    methods: {
      increment() {
        const newValue = this.currentValue + this.step;
        if (newValue <= this.max) {
          this.currentValue = newValue;
          this.$emit('update:modelValue', this.currentValue);
        }
      },
      decrement() {
        const newValue = this.currentValue - this.step;
        if (newValue >= this.min) {
          this.currentValue = newValue;
          this.$emit('update:modelValue', this.currentValue);
        }
      },
      handleInput(event) {
        let newValue = event.target.valueAsNumber;
        if (!isNaN(newValue)) {
          if (newValue > this.max) {
            newValue = this.max;
          } else if (newValue < this.min) {
            newValue = this.min;
          }
          this.currentValue = newValue;
          this.$emit('update:modelValue', this.currentValue);
        }
      }
    }
  });

  const vm = app.mount('#app');
</script>

</body>
</html>