vue自定义数字输入框组件

小雷雷哥哥

于 2018-07-06 14:25:38 发布

阅读量4k

点赞数

分类专栏： vue学习组件开发文章标签： vue组件开发数字输入框组件

本文链接：https://blog.youkuaiyun.com/leileibrother/article/details/80940172

版权

本文介绍了如何开发一个Vue自定义数字输入框组件，该组件包含加减功能，支持设置初始值、最大值和最小值。组件代码及调用方式详细展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近自己在练习组件开发，做了一个简单的数字输入框加减的组件，效果图如下：

组件可以传入三个参数，value是初始化值，max是可输入的最大值，min是可输入最小值，当然参数可以按需求继续扩展的。

组件代码如下：

<template>
    <div style="text-align: center;margin-top: 20px;">
        <input type="text" v-model="currentValue" @change="handleChange">
        <button @click="handleUp" :disabled="currentValue >= max">+</button>
        <button @click="handleDown" :disabled="currentValue <= min">-</button>
    </div>
</template>

<script>
    export default {
        props:['max','min','value'],
        name: "MyInput",
        data(){
            return {

最低0.47元/天解锁文章