diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js index 9f0b2d11f..3dc156994 100644 --- a/src/number-keyboard/Key.js +++ b/src/number-keyboard/Key.js @@ -1,6 +1,5 @@ import { createNamespace } from '../utils'; import { TouchMixin } from '../mixins/touch'; -import { BORDER } from '../utils/constant'; const [createComponent, bem] = createNamespace('key'); @@ -10,10 +9,9 @@ export default createComponent({ props: { type: String, text: [Number, String], - theme: { - type: Array, - default: () => [], - }, + color: String, + wider: Boolean, + large: Boolean, }, data() { @@ -22,22 +20,6 @@ export default createComponent({ }; }, - computed: { - className() { - const classNames = this.theme.slice(0); - - if (this.active) { - classNames.push('active'); - } - - if (this.type) { - classNames.push(this.type); - } - - return bem(classNames); - }, - }, - mounted() { this.bindTouchEvent(this.$el); }, @@ -69,9 +51,22 @@ export default createComponent({ render() { return ( - - {this.slots('default') || this.text} - +
+
+ {this.slots('default') || this.text} +
+
); }, }); diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue index 165da8e05..5e62cdb3f 100644 --- a/src/number-keyboard/demo/index.vue +++ b/src/number-keyboard/demo/index.vue @@ -32,13 +32,15 @@ - + + + +
{titleLeft && {titleLeft}} {title && {title}} {showClose && ( @@ -170,7 +167,8 @@ export default createComponent({ key={key.text} text={key.text} type={key.type} - theme={key.theme} + wider={key.wider} + color={key.color} onPress={this.onPress} > {key.type === 'delete' && this.slots('delete')} @@ -185,18 +183,19 @@ export default createComponent({
{this.showDeleteKey && ( {this.slots('delete')} )}
@@ -206,19 +205,21 @@ export default createComponent({ }, render() { + const Title = this.genTitle(); + return (
- {this.genTitle()} + {Title}
- {this.genKeys()} +
{this.genKeys()}
{this.genSidebar()}
diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index 6e4ebf015..4011824fc 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -11,9 +11,15 @@ background-color: @number-keyboard-background-color; user-select: none; + &--with-title { + border-radius: 20px 20px 0 0; + } + &__title { position: relative; + box-sizing: content-box; height: @number-keyboard-title-height; + padding-top: 6px; color: @number-keyboard-title-color; font-size: @number-keyboard-title-font-size; line-height: @number-keyboard-title-height; @@ -26,8 +32,14 @@ } &__body { - position: relative; - box-sizing: border-box; + display: flex; + padding: 6px 0 0 6px; + } + + &__keys { + display: flex; + flex: 3; + flex-wrap: wrap; } &__close { @@ -39,24 +51,14 @@ cursor: pointer; &:active { - background-color: @number-keyboard-key-active-color; + opacity: @active-opacity; } } &__sidebar { - position: absolute; - right: 0; - bottom: 0; display: flex; + flex: 1; flex-direction: column; - width: 25%; - height: @number-keyboard-key-height * 4; - } - - &--custom { - .van-number-keyboard__body { - padding-right: 25%; - } } &--unfit { @@ -65,30 +67,18 @@ } .van-key { - display: inline-block; - width: 100% / 3; + display: flex; + align-items: center; + justify-content: center; height: @number-keyboard-key-height; font-size: @number-keyboard-key-font-size; - font-style: normal; - line-height: @number-keyboard-key-height; - text-align: center; - vertical-align: middle; + line-height: 1.5; + background-color: @white; + border-radius: @border-radius-lg; cursor: pointer; - &::after { - border-width: @border-width-base @border-width-base 0 0; - } - - &--middle { - width: 200% / 3; - } - - &--big { - display: flex; - flex: 1; - align-items: center; - justify-content: center; - width: 100%; + &--large { + height: 100%; } &--blue, @@ -96,23 +86,6 @@ font-size: @number-keyboard-delete-font-size; } - &--blue { - color: @number-keyboard-button-text-color; - background-color: @number-keyboard-button-background-color; - - &.van-key--active { - background-color: @number-keyboard-button-background-color; - } - - &::after { - border-color: @number-keyboard-button-background-color; - } - - &:active { - background-color: darken(@number-keyboard-button-background-color, 10%); - } - } - &--gray { background-color: @number-keyboard-key-background; } @@ -120,4 +93,24 @@ &--active { background-color: @number-keyboard-key-active-color; } + + &--blue { + color: @number-keyboard-button-text-color; + background-color: @number-keyboard-button-background-color; + + &.van-key--active { + background-color: darken(@number-keyboard-button-background-color, 10%); + } + } + + &__wrapper { + flex: 1; + flex-basis: 33%; + box-sizing: border-box; + padding: 0 6px 6px 0; + + &--wider { + flex-basis: 66%; + } + } } diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap index 2e8a66c90..d20850303 100644 --- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -5,44 +5,244 @@ exports[`renders demo correctly 1`] = `
-
-
完成
-
123456789.0删除
+
+
完成
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
7
+
+
+
8
+
+
+
9
+
+
+
.
+
+
+
0
+
+
+
删除
+
+
+
-