<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>
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;