财人汇 Web Components 组件库

组件

• crh-keyboard 安全键盘-英文数字全键
• crh-keyboard-number 安全键盘-数字/身份证输入键盘

安装

npm i -S @crh-fe/web-components

API

crh-keyboard 安全键盘-英文数字全键

Props

| 参数 | 说明 | 类型 | 默认值 | | ------------- | -------- | -------- | --------- | | title | 标题 | string | 安全键盘 | | ispopup | 是否在底部弹窗显示 | boolean | false | | mask 0.4.0 | 是否显示透明遮罩，点击遮罩会收起键盘，ispopup为true时生效 | boolean | false | | maxlength 0.3.0 | 最大可输入长度 | number | - | | safearea 0.5.0 | 是否开启安全区适配，ispopup为true时生效 | boolean | false | | visible | 是否显示键盘 | boolean | false | | random | 是否乱序键盘 | boolean | false | | value | 输入的值 | string | - |

Events

| 事件名 | 说明 | 回调参数 | | ------ | ---------- | ------------------- | | close | 点击收起键盘时触发 | - | | input | 键盘输入时触发 | event:MouseEvent | | confirm | 点击键盘的确定按钮时触发 | event:MouseEvent |

crh-keyboard-number 安全键盘-数字/身份证输入键盘

Props

| 参数 | 说明 | 类型 | 默认值 | | ------------- | -------- | -------- | --------- | | title | 标题 | string | 安全键盘 | | ispopup | 是否在底部弹窗显示 | boolean | false | | mask 0.4.0 | 是否显示透明遮罩，点击遮罩会收起键盘，ispopup为true时生效 | boolean | false | | maxlength 0.3.0 | 最大可输入长度 | number | - | | safearea 0.5.0 | 是否开启安全区适配，ispopup为true时生效 | boolean | false | | visible | 是否显示键盘 | boolean | false | | random | 是否乱序键盘 | boolean | false | | value | 输入的值 | string | - | | customKey | 自定义按键 | string | X |

Events

| 事件名 | 说明 | 回调参数 | | ------ | ---------- | ------------------- | | close | 点击收起键盘时触发 | - | | input | 键盘输入时触发 | event:MouseEvent | | confirm | 点击键盘的确定按钮时触发 | event:MouseEvent |

使用示例

在Vue中使用示例

<script setup>
import Vue, { ref } from 'vue';
import { PasswordInput } from 'vant';
import '@crh-fe/web-components';
import '@crh-fe/web-components/dist/web-components.css';

import 'vant/lib/index.css';

Vue.use(PasswordInput);

const value = ref('');
const value2 = ref('');
const visible = ref(false);
const visible2 = ref(false);

const handleInput = (e) => {
  console.log('handleInput:', e.detail);
  value.value = e.detail;
};

const handleConfirm = (e) => {
  console.log('handleConfirm:', e.detail);
  visible.value = !visible.value;
};

const handleClose = (e) => {
  console.log('handleClose:', e);
  visible.value = !visible.value;
};

const handleInput2 = (e) => {
  console.log('handleInput2:', e.detail);
  value2.value = e.detail;
};

const handleConfirm2 = (e) => {
  console.log('handleConfirm2:', e.detail);
  visible2.value = !visible2.value;
};

const handleClose2 = (e) => {
  console.log('handleClose2:', e);
  visible2.value = !visible2.value;
};
</script>

<template>
  <div id="app">
    <h2>vue use demo</h2>
    <input
      :value="value"
      placeholder="全键盘输入"
      readonly
      @click="visible = true"
    />
    <input
      :value="value2"
      placeholder="身份证输入"
      readonly
      @click="visible2 = true"
    />
    <button @click="value2 = ''">清除输入</button>

    <!-- 配合vant的密码输入框的使用示例 -->
    <van-password-input
      :value="value"
      :length="8"
      :focused="visible"
      @focus="visible = true"
    />

    <crh-keyboard
      :visible="visible"
      title="安全输入键盘"
      :value="value"
      ispopup
      random
      :maxlength="15"
      @input="handleInput"
      @confirm="handleConfirm"
      @close="handleClose"
    ></crh-keyboard>

    <crh-keyboard-number
      :visible="visible2"
      title="安全输入键盘"
      :value="value2"
      ispopup
      mask
      :maxlength="18"
      :random="false"
      @input="handleInput2"
      @confirm="handleConfirm2"
      @close="handleClose2"
    ></crh-keyboard-number>
  </div>
</template>

在React中使用示例

import { useEffect, useRef, useState } from 'react';
import { PasscodeInput } from 'antd-mobile';
import '@crh-fe/web-components';
import '@crh-fe/web-components/dist/web-components.css';

function App() {
  const [value, setValue] = useState('');
  const [value2, setValue2] = useState('');
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const keyboardRef = useRef(null);
  const keyboardNumberRef = useRef(null);

  const handleInput = (e) => {
    console.log('handleInput:', e.target.value);
    setValue(e.target.value);
  };

  const handleConfirm = (e) => {
    console.log('handleConfirm:', e.detail);
    setVisible(false);
  };

  const handleClose = (e) => {
    console.log('handleClose:', e);
    setVisible(false);
  };

  const handleInput2 = (e) => {
    console.log('handleInput:', e.target.value);
    setValue2(e.target.value);
  };

  const handleConfirm2 = (e) => {
    console.log('handleConfirm:', e.detail);
    setVisible2(false);
  };

  const handleClose2 = (e) => {
    console.log('handleClose:', e);
    setVisible2(false);
  };

  useEffect(() => {
    keyboardRef.current.addEventListener('confirm', handleConfirm);
    keyboardRef.current.addEventListener('close', handleClose);

    keyboardNumberRef.current.addEventListener('confirm', handleConfirm2);
    keyboardNumberRef.current.addEventListener('close', handleClose2);
    return () => {
      keyboardRef.current.removeEventListener('confirm', handleConfirm);
      keyboardRef.current.removeEventListener('confirm', handleClose);

      keyboardNumberRef.current.removeEventListener('confirm', handleConfirm2);
      keyboardNumberRef.current.removeEventListener('close', handleClose2);
    };
  }, []);

  return (
    <div className='App'>
      <h2>react use demo</h2>
      <input
        value={value}
        readOnly
        placeholder='全键盘输入'
        onClick={() => setVisible(true)}
      />

      <input
        value={value2}
        readOnly
        placeholder='身份证输入'
        onClick={() => setVisible2(true)}
      />

      {/* 配合antd-mobile的密码输入框使用 */}
      <PasscodeInput
        length={8}
        seperated
        keyboard={<></>}
        value={value}
        onFocus={() => setVisible(true)}
        onFill={() => setVisible(false)}
      />

      <crh-keyboard
        ref={keyboardRef}
        visible={visible || null}
        title='安全输入键盘'
        ispopup
        mask
        maxlength={15}
        random
        onInput={handleInput}
      ></crh-keyboard>
      <crh-keyboard-number
        ref={keyboardNumberRef}
        visible={visible2 || null}
        title='安全输入键盘'
        value={value2}
        ispopup
        mask
        maxlength={18}
        random
        onInput={handleInput2}
      ></crh-keyboard-number>
    </div>
  );
}

export default App;