좋은 숫자 입력

다음은 지난 주 정도 작업한 내용입니다. 최초의 공개 NPM 패키지입니다. https://github.com/JackSteel97/Nice-Numeric-Input

Nice-Numeric-Input은 Vue에 구축된 현대적이고 풍부한 기능과 고도로 사용자 정의 가능한 숫자 입력입니다. 통화 형식을 포함하여 사용자가 입력할 때 형식을 지정할 수 있습니다. Vue 자체 이외의 추가 종속성이 없습니다.

데모

Basic Demo

시작하기

설치

> npm install nice-numeric-input

용법

수입

import NiceNumericInput from 'nice-numeric-input'

등록하다

export default Vue.extend({
    //...
    components: { NiceNumericInput }
    //...
});

소품의 전체 목록은 Reference Props 섹션을 참조하십시오.

<nice-numeric-input v-model="cashValue"
                    placeholder="Enter a cash value"
                    label="Cash"
                    name="example"
                    currency="GBP"
                    locale="en-GB"
                    :max="100"
                    :min="0" />

참조

소품

소품
유형
필수의
기본값
메모


값Number예0양방향 바인딩을 얻으려면 v-model를 사용하십시오.

IDString아니"nice-numeric-input"
이름String아니"nice-numeric-input"
상표String예

접근성을 위해 필요합니다. hide-label를 사용하여 시각적 레이블을 제거하십시오.

자리 표시자String아니


단계Number아니1단계 버튼을 사용할 때 증가 또는 감소할 양

분Number아니NEGATIVE_INFINITY이 아래에 입력한 항목은 isValid 확인에 실패합니다.

최대Number아니POSITIVE_INFINITY이 위에 입력한 항목은 isValid 확인에 실패합니다.

유효하다Boolean아니

기본 내부 유효성 검사, .sync 수정자를 사용하여 변경 사항 가져오기

장애가 있는Boolean아니false전체 구성 요소 비활성화

장소String아니
`창.내비게이터.언어\
\

통화
{% 원시 %}String
아니nullnull 통화 형식이 꺼져 있을 때. 그렇지 않으면 모든 통화 코드가 될 수 있습니다. USD , EUR , JPY
minDecimalPlacesNumber아니0
maxDecimalPlacesNumber아니2
정수만Boolean아니false십진수 입력을 방지하고 항목은 가장 가까운 정수로 반올림됩니다.

noControlsBoolean아니false단계 버튼을 제거합니다.

숨김 라벨Boolean아니false시각적 레이블을 제거합니다.

감소제목String아니"Decrease"접근성을 위한 버튼 제목

제목 증가String아니"Increase"접근성을 위한 버튼 제목

텍스트 증가String아니"+"증가 단계 버튼에 표시되는 텍스트

텍스트 감소String아니"-"감소 단계 버튼에 표시되는 텍스트

superIncreaseTextString아니"++"슈퍼 스텝이 활성화되어 있을 때 스텝 증가 버튼에 표시되는 텍스트(Ctrl 또는 Alt)

슈퍼감소텍스트String아니"--"슈퍼 스텝이 활성화된 경우 감소 스텝 버튼에 표시되는 텍스트(Ctrl 또는 Alt)

ultraIncreaseTextString아니"+++"울트라 스텝이 활성화되어 있을 때 스텝 증가 버튼에 표시되는 텍스트(Ctrl + Alt)

ultraDecreaseTextString아니"---"울트라 스텝이 활성화되어 있을 때 스텝 감소 버튼에 표시되는 텍스트(Ctrl + Alt)

슈퍼스텝Number아니10슈퍼 스텝 동안 변경되는 양

울트라스텝Number아니100울트라 스텝 중 변경되는 양

레이블 클래스String아니

시각적 레이블에 적용할 사용자 정의 클래스

입력 클래스String아니

입력 필드에 적용할 사용자 정의 클래스

감소 버튼 클래스String아니

감소 단계 버튼에 적용할 사용자 정의 클래스

증가 버튼 클래스String아니

단계 증가 버튼에 적용할 사용자 정의 클래스

래퍼 클래스String아니

최상위 구성 요소 요소에 적용할 사용자 정의 클래스

슈퍼스텝클래스String아니

슈퍼 단계가 활성화된 경우 두 단계 버튼에 모두 적용할 사용자 정의 클래스

울트라스텝클래스String아니

울트라 스텝이 활성화되었을 때 두 스텝 버튼에 모두 적용할 커스텀 클래스

이벤트

이벤트
방출 유형
메모


입력Numberv-model 바인딩에 의해 자동으로 사용됩니다. 수동으로 바인딩 가능, 값이 변경되면 실행

업데이트: 유효하다Boolean.sync 소품의 isValid 수정자에 의해 자동으로 사용됩니다. 수동으로 바인딩할 수 있으며 유효한 값이 변경되면 실행됩니다.