blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat: migrate PasswordInput component

Browse Source
This commit is contained in:
chenjiahan 2020-08-15 08:24:37 +08:00
parent 6347a09df1
commit 6d3ce89502
4 changed files with 92 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.js
View File

@ -53,4 +53,5 @@ module.exports = [
'radio-group',
'datetime-picker',
'number-keyboard',
'password-input',
];

83
src/password-input/index.js Normal file
View File

@ -0,0 +1,83 @@
// Utils
import { createNamespace, addUnit } from '../utils';
import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
const [createComponent, bem] = createNamespace('password-input');
export default createComponent({
props: {
info: String,
gutter: [Number, String],
focused: Boolean,
errorInfo: String,
mask: {
type: Boolean,
default: true,
},
value: {
type: String,
default: '',
},
length: {
type: [Number, String],
default: 6,
},
},
emits: ['focus'],
setup(props, { emit }) {
function onTouchStart(event) {
event.stopPropagation();
emit('focus', event);
}
return () => {
const { mask, value, length, gutter, focused, errorInfo } = props;
const info = errorInfo || props.info;
const Points = [];
for (let i = 0; i < length; i++) {
const char = value[i];
const showBorder = i !== 0 && !gutter;
const showCursor = focused && i === value.length;
let style;
if (i !== 0 && gutter) {
style = { marginLeft: addUnit(gutter) };
}
Points.push(
<li
class={[
{ [BORDER_LEFT]: showBorder },
bem('item', { focus: showCursor }),
]}
style={style}
>
{mask ? (
<i style={{ visibility: char ? 'visible' : 'hidden' }} />
) : (
char
)}
{showCursor && <div class={bem('cursor')} />}
</li>
);
}
return (
<div class={bem()}>
<ul
class={[bem('security'), { [BORDER_SURROUND]: !gutter }]}
onTouchstart={onTouchStart}
>
{Points}
</ul>
{info && (
<div class={bem(errorInfo ? 'error-info' : 'info')}>{info}</div>
)}
</div>
);
};
},
});

93
src/password-input/index.tsx
View File

@ -1,93 +0,0 @@
// Utils
import { createNamespace, addUnit } from '../utils';
import { emit, inherit } from '../utils/functional';
import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
// Types
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/types';
export type PasswordInputProps = {
mask: boolean;
info?: string;
value: string;
length: number | string;
gutter: number;
focused?: boolean;
errorInfo?: string;
};
const [createComponent, bem] = createNamespace('password-input');
function PasswordInput(
h: CreateElement,
props: PasswordInputProps,
slots: DefaultSlots,
ctx: RenderContext<PasswordInputProps>
) {
const { mask, value, length, gutter, focused, errorInfo } = props;
const info = errorInfo || props.info;
const Points = [];
for (let i = 0; i < length; i++) {
const char = value[i];
const showBorder = i !== 0 && !gutter;
const showCursor = focused && i === value.length;
let style;
if (i !== 0 && gutter) {
style = { marginLeft: addUnit(gutter) };
}
Points.push(
<li
class={[{ [BORDER_LEFT]: showBorder }, bem('item', { focus: showCursor })]}
style={style}
>
{mask ? (
<i style={{ visibility: char ? 'visible' : 'hidden' }} />
) : (
char
)}
{showCursor && <div class={bem('cursor')} />}
</li>
);
}
return (
<div class={bem()}>
<ul
class={[bem('security'), { [BORDER_SURROUND]: !gutter }]}
onTouchstart={(event: TouchEvent) => {
event.stopPropagation();
emit(ctx, 'focus', event);
}}
{...inherit(ctx, true)}
>
{Points}
</ul>
{info && <div class={bem(errorInfo ? 'error-info' : 'info')}>{info}</div>}
</div>
);
}
PasswordInput.props = {
info: String,
gutter: [Number, String],
focused: Boolean,
errorInfo: String,
mask: {
type: Boolean,
default: true,
},
value: {
type: String,
default: '',
},
length: {
type: [Number, String],
default: 6,
},
};
export default createComponent<PasswordInputProps>(PasswordInput);

16
vant.config.js
View File

@ -139,10 +139,10 @@ module.exports = {
path: 'number-keyboard',
title: 'NumberKeyboard 数字键盘',
},
// {
// path: 'password-input',
// title: 'PasswordInput 密码输入框',
// },
{
path: 'password-input',
title: 'PasswordInput 密码输入框',
},
{
path: 'picker',
title: 'Picker 选择器',
@ -473,10 +473,10 @@ module.exports = {
path: 'number-keyboard',
title: 'NumberKeyboard',
},
// {
// path: 'password-input',
// title: 'PasswordInput',
// },
{
path: 'password-input',
title: 'PasswordInput',
},
{
path: 'picker',
title: 'Picker',