[new feature] NumberKeyboard add custom theme (#472)

This commit is contained in:
neverland
2017-12-22 16:29:21 +08:00
committed by GitHub
parent 57abc04346
commit 9e6b663145
7 changed files with 259 additions and 97 deletions

View File

@@ -1,15 +1,31 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button @touchstart.native.stop="showKeyboard = true">
<demo-block :title="$t('default')">
<van-button @touchstart.native.stop="keyboard = 'default'">
{{ $t('button1') }}
</van-button>
<van-number-keyboard
:show="showKeyboard"
:show="keyboard === 'default'"
:closeButtonText="$t('close')"
extraKey="."
@blur="showKeyboard = false"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
</demo-block>
<demo-block :title="$t('custom')">
<van-button @touchstart.native.stop="keyboard = 'custom'">
{{ $t('button2') }}
</van-button>
<van-number-keyboard
:show="keyboard === 'custom'"
:closeButtonText="$t('close')"
theme="custom"
extraKey="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
@@ -21,20 +37,24 @@
export default {
i18n: {
'zh-CN': {
button1: '弹出键盘',
button2: '收起键盘',
default: '默认样式',
custom: '自定义样式',
button1: '弹出默认键盘',
button2: '弹出自定义键盘',
close: '完成'
},
'en-US': {
button1: 'Show Keyboard',
button2: 'Hide Keyboard',
default: 'Default style',
custom: 'Custom style',
button1: 'Show Default Keyboard',
button2: 'Show Custom Keyboard',
close: 'Close'
}
},
data() {
return {
showKeyboard: true
keyboard: 'default'
};
},
@@ -46,10 +66,9 @@ export default {
Toast('Delete');
}
}
}
};
</script>
<style lang="postcss">
.demo-number-keyboard {
.van-button {