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: …
}

使用下面描述的组件

组件
整数+ / -

Your value is

{{ ipm_value }}

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

<template slot="increment">{{ ipm_slot_incr }}</template>

道具
类型
请注意

最小值
数量
最小可能值。不能低衰减。默认是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