mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
[improvement] NumberKeyboard: jsx (#2558)
This commit is contained in:
neverland
GitHub
parent
11a672f9e3
commit
a5c39425e8
52
packages/number-keyboard/Key.js
Normal file
52
packages/number-keyboard/Key.js
Normal file
@ -0,0 +1,52 @@
|
||||
import { use } from '../utils';
|
||||
|
||||
const [sfc, bem] = use('key');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
type: Array,
|
||||
text: [String, Number]
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
className() {
|
||||
const types = this.type.slice(0);
|
||||
this.active && types.push('active');
|
||||
return bem(types);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.active = true;
|
||||
this.$emit('press', this.text);
|
||||
},
|
||||
|
||||
onBlur(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.active = false;
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { onBlur } = this;
|
||||
return (
|
||||
<i
|
||||
class={['van-hairline', this.className]}
|
||||
onTouchstart={this.onFocus}
|
||||
onTouchmove={onBlur}
|
||||
onTouchend={onBlur}
|
||||
onTouchcancel={onBlur}
|
||||
>
|
||||
{this.text}
|
||||
</i>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<i
|
||||
v-text="text"
|
||||
:class="['van-hairline', className]"
|
||||
@touchstart.stop.prevent="onFocus"
|
||||
@touchmove="onBlur"
|
||||
@touchend="onBlur"
|
||||
@touchcancel="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'key',
|
||||
|
||||
props: {
|
||||
type: Array,
|
||||
text: [String, Number]
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
className() {
|
||||
const types = this.type.slice(0);
|
||||
this.active && types.push('active');
|
||||
return this.b(types);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.active = true;
|
||||
this.$emit('press', this.text);
|
||||
},
|
||||
|
||||
onBlur() {
|
||||
this.active = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -1,63 +1,11 @@
|
||||
<template>
|
||||
<transition :name="transition ? 'van-slide-up' : ''">
|
||||
<div
|
||||
v-show="show"
|
||||
:style="style"
|
||||
:class="b([theme])"
|
||||
@touchstart.stop
|
||||
@animationend="onAnimationEnd"
|
||||
@webkitAnimationEnd="onAnimationEnd"
|
||||
>
|
||||
<div
|
||||
v-if="title || showTitleClose"
|
||||
:class="b('title')"
|
||||
class="van-hairline--top"
|
||||
>
|
||||
<span v-text="title" />
|
||||
<span
|
||||
:class="b('close')"
|
||||
v-if="showTitleClose"
|
||||
v-text="closeButtonText"
|
||||
@click="onClose"
|
||||
/>
|
||||
</div>
|
||||
<div :class="b('body')">
|
||||
<key
|
||||
v-for="key in keys"
|
||||
:key="key.text"
|
||||
:text="key.text"
|
||||
:type="key.type"
|
||||
@press="onPressKey"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="theme === 'custom'"
|
||||
:class="b('sidebar')"
|
||||
>
|
||||
<key
|
||||
:text="deleteText"
|
||||
:type="['delete', 'big', 'gray']"
|
||||
@press="onPressKey"
|
||||
/>
|
||||
<key
|
||||
:text="closeButtonText"
|
||||
:type="['blue', 'big']"
|
||||
@press="onPressKey"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import { use } from '../utils';
|
||||
import Key from './Key';
|
||||
|
||||
export default create({
|
||||
name: 'number-keyboard',
|
||||
|
||||
components: { Key },
|
||||
const [sfc, bem, t] = use('number-keyboard');
|
||||
const CLOSE_KEY_TYPE = ['blue', 'big'];
|
||||
const DELETE_KEY_TYPE = ['delete', 'big', 'gray'];
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
show: Boolean,
|
||||
title: String,
|
||||
@ -129,28 +77,15 @@ export default create({
|
||||
);
|
||||
break;
|
||||
case 'custom':
|
||||
keys.push(
|
||||
{ text: 0, type: ['middle'] },
|
||||
{ text: this.extraKey }
|
||||
);
|
||||
keys.push({ text: 0, type: ['middle'] }, { text: this.extraKey });
|
||||
break;
|
||||
}
|
||||
|
||||
return keys;
|
||||
},
|
||||
|
||||
style() {
|
||||
return {
|
||||
zIndex: this.zIndex
|
||||
};
|
||||
},
|
||||
|
||||
showTitleClose() {
|
||||
return this.closeButtonText && this.theme === 'default';
|
||||
},
|
||||
|
||||
deleteText() {
|
||||
return this.deleteButtonText || this.$t('delete');
|
||||
return this.deleteButtonText || t('delete');
|
||||
}
|
||||
},
|
||||
|
||||
@ -180,7 +115,7 @@ export default create({
|
||||
this.$emit(this.show ? 'show' : 'hide');
|
||||
},
|
||||
|
||||
onPressKey(text) {
|
||||
onPress(text) {
|
||||
if (text === '') {
|
||||
return;
|
||||
}
|
||||
@ -193,6 +128,47 @@ export default create({
|
||||
this.$emit('input', text);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { theme, onPress, closeButtonText } = this;
|
||||
const showTitleClose = closeButtonText && theme === 'default';
|
||||
|
||||
return (
|
||||
<transition name={this.transition ? 'van-slide-up' : ''}>
|
||||
<div
|
||||
v-show={this.show}
|
||||
style={{ zIndex: this.zIndex }}
|
||||
class={bem([theme])}
|
||||
onTouchstart={event => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onAnimationend={this.onAnimationEnd}
|
||||
onWebkitAnimationEnd={this.onAnimationEnd}
|
||||
>
|
||||
{(this.title || showTitleClose) && (
|
||||
<div class={[bem('title'), 'van-hairline--top']}>
|
||||
<span>{this.title}</span>
|
||||
{showTitleClose && (
|
||||
<span class={bem('close')} onClick={this.onClose}>
|
||||
{closeButtonText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div class={bem('body')}>
|
||||
{this.keys.map(key => (
|
||||
<Key key={key.text} text={key.text} type={key.type} onPress={onPress} />
|
||||
))}
|
||||
</div>
|
||||
{theme === 'custom' && (
|
||||
<div class={bem('sidebar')}>
|
||||
<Key text={this.deleteText} type={DELETE_KEY_TYPE} onPress={onPress} />
|
||||
<Key text={closeButtonText} type={CLOSE_KEY_TYPE} onPress={onPress} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</transition>
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -6,18 +6,16 @@ exports[`renders demo correctly 1`] = `
|
||||
弹出默认键盘
|
||||
</span></button>
|
||||
<div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
|
||||
<div class="van-hairline--top van-number-keyboard__title"><span></span> <span class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span></span><span class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
|
||||
弹出自定义键盘
|
||||
</span></button>
|
||||
<div name="van-slide-up" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">
|
||||
<!---->
|
||||
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--middle">0</i><i class="van-hairline van-key">.</i></div>
|
||||
<div class="van-number-keyboard__sidebar"><i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i> <i class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
|
||||
<div class="van-number-keyboard__sidebar"><i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,9 +15,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
<div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
|
||||
<!---->
|
||||
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user