el-input-number 自定义样式

`el-input-number`是Element UI库中的一个组件，它是一个带下拉箭头的数字输入框，用于输入整数。如果你想自定义这个组件的样式，你可以通过CSS覆盖默认的样式，或者直接在Vue组件中使用 scoped CSS（局部样式）。以下是一些基本步骤：

1. **使用全局CSS覆盖**：
- 将你的CSS规则放在<style>标签内，或者创建一个新的CSS文件，并在HTML头部引入。例如：

     .custom-input-number {
       width: 100px; /* 可以修改宽度 */
       background-color: #f0f0f0; /* 修改背景颜色 */
     }

然后，在`<el-input-number>`元素上应用这个类：

     <el-input-number :class="{'custom-input-number': true}" />

2. **使用scoped CSS**：
- 如果你想只让特定组件内的样式生效，可以在`.vue`文件的`<style scoped>`部分编写CSS。例如：

     <template>
       <div class="custom-input-number">
         <el-input-number />
       </div>
     </template>

     <style scoped>
       .custom-input-number {
         width: 150px;
         border-color: #ccc;
       }
     </style>

3. **修改组件内部样式**：
- 如果需要更深入地控制组件内部的样式，可以使用`v-bind:class`结合计算属性或者条件渲染来动态添加类。

记得在调整样式后，可能需要刷新浏览器查看效果，并且要在所有相关的设备和浏览器上进行测试，以确保自定义样式的一致性和兼容性。