vue-integer-plusminus

下载 vue-integer-plusminus
vue-integer-plusminus

带有递增和递减按钮的整数输入
现场演示
该组件适合作为自旋按钮，允许键盘功能(向上/向下箭头或页面向上/向下增量/递减，主/结束为最小/最大)
全球使用

npm安装

npm install --save vue-integer-plusminus

导入组件

import { IntegerPlusminus } from 'vue-integer-plusminus'

在vue脚本中声明使用或导入组件

export default {
    components: { IntegerPlusminus },
    methods: ...
}

使用下面描述的组件 组件 整数+ / -

<integer-plusminus></integer-plusminus>

<integer-plusminus :min="ipm_min"
                   :max="ipm_max"
                   :step="ipm_step"
                   :vertical="ipm_vertical"
                   :disabled="imp_disabled"
                   formName="integer_plus_minus"
                   v-model="ipm_value">
    <p>Your value is</p>
    {{ ipm_value }}

    <template slot="decrement">{{ ipm_slot_decr }}</template>

    <template slot="increment">{{ ipm_slot_incr }}</template>
</integer-plusminus>

道具 类型 请注意 最小值 数量 最小可能值。不能低衰减。默认是0 马克斯 数量 最大的可能值。不能增加了。默认是未定义的 一步 数量 增量和递减步。必须大于0。默认是1 stepIncrement 数量 增量的步骤中,可选的。如果大于0(默认值)，则递增时该值将替换第一步 stepDecrement 数量 递减一步,可选的。如果大于0(默认值)，则在递减时，此值替换“步骤”1 垂直 布尔 使用垂直布局。默认的是假的 禁用 布尔 禁用按钮和按键事件。默认的是假的 spinButtonAriaLabel 字符串 在value元素上设置aria-label属性，可选 incrementAriaLabel 字符串 在递减按钮元素上设置aria-label属性，可选 decrementAriaLabel 字符串 在增量按钮元素上设置aria-label属性，可选 formName 字符串 设置表单输入的“name”属性。默认是“integerPlusMinus” 该组件提供3个插槽 默认插槽是通常显示值时的中间部分 “增量”槽用于增量按钮。 通常在水平布局的右边， 或者顶部用于垂直布局。 “递减”槽用于递减按钮。 通常在水平布局的左边， 或底部为垂直布局。 样式可以被覆盖使用!重要的css关键字

.int-input-increment {
    background: #5CB85C !important;
}

事件: 值变化的“输入” 价值增量的“ipm-增量” 值递减的“ipm-递减” 贡献 叉存储库 运行npm安装 您可以运行npm run dev，站点位于http://localhost:8081。 做你的东西 当您完成时，运行npm run build命令并为一个pull请求提交您的工作。本文转载于：http://www.diyabc.com/frontweb/news33280.html