Компоненты клавиатуры для мини-программы

• 小程序键盘组件

  • 说明

    • — Текущая версия: v1.2.0.
    • — Загрузка с npm:

      npm i miniprogram-keyboard-type -S
    • — Компонент представлен в трёх вариантах: «всплывающая клавиатура с паролем», «всплывающая автомобильная клавиатура» и «встраиваемая автомобильная клавиатура».
    • — Поддерживается режим DarkMode (см. ссылку).

  • Использование

    "usingComponents": { "Passwordkeyboard": "/Ваш путь/Passwordkeyboard/index" }

    
    * ```html
    <Passwordkeyboard 
        valueLength="{{6}}" 
        title="密码键盘" 
        anonymous 
        isShow="{{isShow}}" 
        bind:onConfirm=""
        bind:onCancel=""
    />

  • Изменение стиля (wxss)

    class	Описание
    right_key	Стиль для кнопки удаления
    btn-confirm	Стиль для подтверждающей кнопки

  • Параметры

    Параметр	Описание	Тип	Обязательно	Примечание
    title	Заголовок	String	Да
    valueLength	Длина	Number	Нет	По умолчанию 6
    anonymous	Шифрование	Boolean	Нет	В пользовательском интерфейсе отображается как *
    isShow	Отображение	Boolean	Да
    zIndex	Уровень z-индекса	Number	Нет	По умолчанию 50
    safe-area-inset-bottom	Безопасная область снизу	Boolean	Нет

  • События

    Событие	Описание	Параметр
    onCancel	Срабатывает при отмене	—
    onConfirm	Срабатывает при подтверждении	{'value':'123456'}

Встраиваемая автомобильная клавиатура

• Описание

  • — Рекомендуется использовать вместе с CarTypeInput и CarInputboard.

  • — CarTypeInput можно использовать в from.

  • — Отличается от carKeyboard и CarInputboard только стилем, без дополнительных параметров и методов.

  • — Для лучшего взаимодействия с пользователем необходимо реализовать функцию потери фокуса. Для этого нужно добавить событие клика на верхний уровень view. CarInputboard должен быть расположен вне верхнего уровня view.

  • Использование

    "CarTypeInput": "/component/CarTypeInput/index",
    "CarInputboard":"/component/CarInputboard/index"

    <CarTypeInput 
        bind:onfocus="onfocus"
        placeholder=""
        name="carNum" 
        value="{{value}}"
        isBlur="{{isblur}}"
     />
    <CarInputboard
        isBlur="{{isblur}}"
        bind:ListenValue="getValue"  
        bind:onConfirm="onConfirm"
        isShow="{{show}}"
    />
    <!-- Необходимая реализация функции потери фокуса -->
    <view bindtap="blur">
          <view></view>
          <view></view>
          <TypeInput 
            bind:onfocus="onfocus"
            placeholder=""
            name="carNum" 
            value="{{value}}"
            isBlur="{{isblur}}"
         />
        <view></view>
        <view></view>
    </view>
    <CarInputboard
        isBlur="{{isblur}}"
        bind:ListenValue="getValue"  
        bind:onConfirm="onClickBox"
        isShow="{{show}}"
    />

    Page({
        data: {
            show:false,
            value:'',
            isblur:true,
        },
        //Потеря фокуса
        blur(e){
            this.setData({
                show:false,
                isblur:true,
            })
        },
        //Получение фокуса (клик)
        onfocus(e){
            this.setData({
                show:true,
                isblur:false,
            })
        },
        //Завершение после нажатия на клавиатуре
        onConfirm(){
            this.setData({
                show:false,
                isblur:true
            })
        },
        getValue(e){
            this.setData({
                value:e.detail.value
            })
        }
    })

  • Стили (wxss):

    — TypeInput:

    Класс	Описание
    typeinput	Стиль поля ввода

  • Параметры:

    — TypeInput:

    Параметр	Описание	Тип	Обязательный	Примечание
    value	Значение	String	Нет
    height	Высота поля ввода	Number	Нет	По умолчанию 60px

| --- | --- | | isBlur | 是否失去聚焦 | Boolean | 是 | | | lineColor | 光标颜色 | 16进制 | 否 | #333 | | name | key值 | String | 否 |from 内使用必传**|

• height влияет на высоту курсора.
• name в from используется обязательно.
• isBlur true означает потерю фокуса.

CarInputboard

• isBlur: true означает, что фокус потерян.

События

• TypeInput

  Событие	Описание	Параметры
  onfocus	Получает фокус	-

• CarInputboard

  Событие	Описание	Параметры
  ListenValue	Слушает изменение значения	'value': значение, 'sub': длина, exp: регулярное выражение
  onConfirm	Срабатывает при нажатии кнопки подтверждения	-

Клавиатура для автомобильных номеров

• Описание

  • Используйте carKeyboard и carKeyInput вместе.
  • Обратите внимание:
    • В случае необходимости использования CarCardInput, передайте CarNumid, полученный с помощью onChangeCard, компоненту CarCardboard.

• Справочные материалы

  • Правила оформления китайских автомобильных номеров.
  • Китайские автомобильные номера.

• Использование

"CarCardInput": "/Ваш путь/CarCardInput/index"
"CarCardboard": "/Ваш путь/carKeyInput/index"

<CarCardInput  
    value="{{value}}" 
    bind:onChangeCard="onChangeCard"
    bind:onClickBox="onClickBox"
/>
<CarCardboard 
    bind:ListenValue="getValue"  
    bind:onConfirm="onClickBox"
    CarNumid="{{CarNumid}}"
    isShow="{{show}}"
/>

Page({
    data: {
        value:"",
        valueStr:'',
        CarNumId: 0,
        show:false
    },
    getValue(e){
        const value = e.detail.value;
        this.setData({
            value: value, // Значение — массив
            valueStr: value.join('').toString(), // Полученная строка номера автомобиля
            msg: e.detail.exp.msg || '' // Регулярное выражение возвращает информацию
        })
    },
    // Срабатывает, когда изменяется тип автомобильного номера
    onChangeCard(e) {
        this.setData({
            CarNumId: e.detail.CarNumId
        })
    },
    // Срабатывает по щелчку на номер или поле ввода (отображение/скрытие клавиатуры)
    onClickBox(e){
        const {show} = this.data; 
        this.setData({
            show:!show
        })
    }
})

• Параметры

  • CarCardInput

    Параметр	Описание	Тип	Обязателен	Примечание
    value	Рендерит значение	Array	Да
    showCard	Показывает ли переключатель карт	Boolean	Нет

  • CarCardboard

    Параметр	Описание	Тип	Обязателен	Примечание
    CarNumid	Индекс типа автомобильного номера	Number	Да
    safe-area-inset-bottom	Нижняя безопасная область (ios)	Boolean	Нет

• События

  • carKeyInput

    Событие	Описание	Параметр
    ChangeCard	Когда меняется тип автомобильного номера	CarNumid
    onClickBox	Срабатывает при клике	—

  • carKeyInput

    Событие	Описание	Параметр
    ListenValue	Следит за изменением значения	’value‘:значение, ‘sub‘:длина, exp:регулярное выражение
    onConfirm	Срабатывает после нажатия кнопки подтверждения	—

• Обновление наименования:

  • CarCardboard -> carKeyboard;
  • CarCardInput -> carKeyInput.

• Добавление компонентов: TypeInput и CarInputboard.

• Исправление: исправлена проблема мерцания компонента CarCardboard при переходе на страницу.

• Прочее: удалены некоторые ненужные печатные журналы и параметры.

• Авторский WeChat.

v1.1.20200411

carKeyboard:

• добавление регулярного выражения (реализовано);
• эффект анимации клавиатуры;
• эффект рендеринга номерного знака.

v1.1.20200410

Passwordkeyboard:

• исправление проблемы, когда в парольной клавиатуре можно было ввести более одной цифры;
• обеспечение безопасности нижней части пароля на iOS;
• подсказка о количестве вводимых цифр.

carKeyboard:

• добавлено регулярное выражение (не реализовано).