Слияние кода завершено, страница обновится автоматически
Базируется на Vant-NumberKeyboard — пользовательский цифровой ввод с клавиатурой.
type=number в стандартном <input> вызывает системную клавиатуру, но при этом атрибуты minlength, maxlength становятся недействительными, а также невозможно запрещать ввод некоторых специальных символов.change или input для проверки значений в JavaScript приводит к эффекту мигания внутри поля ввода, а курсор автоматически перемещается в конец (можно контролировать курсор, но это плохо влияет на совместимость).keypress для предварительной проверки ввода, но Android его не поддерживает, поэтому пришлось реализовать цифровое поле ввода самостоятельно.
.cursor {
position: relative;
height: 35px;
&::after {
content: "";
animation: blink 1s infinite steps(1, start);
position: absolute;
width: 2px;
height: 30px;
right: 0;
top: 2.5px;
background: rgb(0, 53, 237);
border-radius: 2px;
}
}
@keyframes blink {
0%, 100% {
background: transparent;
}
50% {
background: rgb(0, 53, 237);
}
}
Импортировать компонент в main.js.
import customInput from "./components/customInput";
Vue.use(customInput);
Теперь вы можете использовать custom-input в ваших страницах:
<template>
<custom-input
v-model="inputMoney"
placeholder="Максимальное значение 888.88, округление до трёх знаков после запятой"
max="888.88"
:toFixed="3"
></custom-input>
</template>
<script>
export default {
data() {
return {
inputMoney: "",
};
},
};
</script>
| Атрибут | Описание | Тип | По умолчанию |
|---|---|---|---|
| value | Текущее значение ввода | String | - |
| placeholder | Значение плейсхолдера | String | "placeholder" |
| transform | Проверяет, находится ли поле ввода под клавиатурой | Boolean | true |
| max | Максимальное значение ввода | String, Number | 9999999999.99 |
| toFixed | Количество знаков после запятой | Number | 2 |
| Событие | Описание | Возвращаемое значение |
|---|---|---|
| onKeyboardOpen | Открытие пользовательской клавиатуры | data |
| close | Закрытие пользовательской клавиатуры | data |
| input | Изменение текущего значения ввода | data |
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
└── src
├── App.vue // демо
├── components
│ └── customInput // пользовательский цифровой ввод
│ ├── index.js
│ ├── input.vue
│ └── keyboard.vue
└── main.js
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )