[new feature] NumberKeyboard: add delete slot (#3499)

2025-05-24 15:39:15 +08:00 · 2019-06-13 19:23:51 +08:00 · 2019-06-13 19:23:51 +08:00 · efa2e0c5d7
commit efa2e0c5d7
parent 639450709f
7 changed files with 149 additions and 62 deletions
--- a/packages/number-keyboard/Key.js
+++ b/packages/number-keyboard/Key.js
@ -4,7 +4,8 @@ const [sfc, bem] = use('key');

 export default sfc({
  props: {
-    type: Array,
+    type: String,
+    theme: Array,
    text: [String, Number]
  },

@ -16,9 +17,17 @@ export default sfc({

  computed: {
    className() {
-      const types = this.type.slice(0);
-      this.active && types.push('active');
-      return bem(types);
+      const classNames = this.theme.slice(0);
+
+      if (this.active) {
+        classNames.push('active');
+      }
+
+      if (this.type) {
+        classNames.push(this.type);
+      }
+
+      return bem(classNames);
    }
  },

@ -32,7 +41,7 @@ export default sfc({
    },

    onClick() {
-      this.$emit('press', this.text);
+      this.$emit('press', this.text, this.type);
    }
  },

@ -49,7 +58,7 @@ export default sfc({
        onTouchend={onBlur}
        onTouchcancel={onBlur}
      >
-        {this.text}
+        {this.slots('default') || this.text}
      </i>
    );
  }
--- a/packages/number-keyboard/en-US.md
+++ b/packages/number-keyboard/en-US.md
@ -92,4 +92,5 @@ export default {

 | Name | Description |
 |------|------|
+| delete | Custom delete button content |
 | title-left | Custom title left content |
--- a/packages/number-keyboard/index.js
+++ b/packages/number-keyboard/index.js
@ -4,8 +4,8 @@ import { BindEventMixin } from '../mixins/bind-event';
 import Key from './Key';

 const [sfc, bem, t] = use('number-keyboard');
-const CLOSE_KEY_TYPE = ['blue', 'big'];
-const DELETE_KEY_TYPE = ['delete', 'big', 'gray'];
+const CLOSE_KEY_THEME = ['blue', 'big'];
+const DELETE_KEY_THEME = ['delete', 'big', 'gray'];

 export default sfc({
  mixins: [
@ -66,13 +66,13 @@ export default sfc({
      switch (this.theme) {
        case 'default':
          keys.push(
-            { text: this.extraKey, type: ['gray'] },
+            { text: this.extraKey, theme: ['gray'] },
            { text: 0 },
-            { text: this.deleteText, type: ['gray', 'delete'] }
+            { text: this.deleteText, theme: ['gray'], type: 'delete' }
          );
          break;
        case 'custom':
-          keys.push({ text: 0, type: ['middle'] }, { text: this.extraKey });
+          keys.push({ text: 0, theme: ['middle'] }, { text: this.extraKey });
          break;
      }

@ -98,14 +98,14 @@ export default sfc({
      this.$emit(this.show ? 'show' : 'hide');
    },

-    onPress(text) {
+    onPress(text, type) {
      if (text === '') {
        return;
      }

-      if (text === this.deleteText) {
+      if (type === 'delete') {
        this.$emit('delete');
-      } else if (text === this.closeButtonText) {
+      } else if (type === 'close') {
        this.onClose();
      } else {
        this.$emit('input', text);
@ -132,6 +132,37 @@ export default sfc({
      </div>
    );

+    const Keys = this.keys.map(key => (
+      <Key
+        key={key.text}
+        text={key.text}
+        type={key.type}
+        theme={key.theme}
+        onPress={onPress}
+      >
+        {key.type === 'delete' && this.slots('delete')}
+      </Key>
+    ));
+
+    const Sidebar = theme === 'custom' && (
+      <div class={bem('sidebar')}>
+        <Key
+          text={this.deleteText}
+          type="delete"
+          theme={DELETE_KEY_THEME}
+          onPress={onPress}
+        >
+          {this.slots('delete')}
+        </Key>
+        <Key
+          text={closeButtonText}
+          type="close"
+          theme={CLOSE_KEY_THEME}
+          onPress={onPress}
+        />
+      </div>
+    );
+
    return (
      <transition name={this.transition ? 'van-slide-up' : ''}>
        <div
@ -143,17 +174,8 @@ export default sfc({
          onWebkitAnimationEnd={this.onAnimationEnd}
        >
          {Title}
-          <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 class={bem('body')}>{Keys}</div>
+          {Sidebar}
        </div>
      </transition>
    );
--- a/packages/number-keyboard/test/snapshots/demo.spec.js.snap
+++ b/packages/number-keyboard/test/snapshots/demo.spec.js.snap
@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
    </span></button>
    <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i></div>
-      <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
+      <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
    </div>
  </div>
 </div>
--- a/packages/number-keyboard/test/snapshots/index.spec.js.snap
+++ b/packages/number-keyboard/test/snapshots/index.spec.js.snap
@ -1,7 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`focus on key 1`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
+exports[`focus on key 2`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
+exports[`render title 1`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__title van-hairline--top"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
 exports[`title-left slot 1`] = `
-<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
  <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
--- a/packages/number-keyboard/test/index.spec.js
+++ b/packages/number-keyboard/test/index.spec.js
@ -1,5 +1,5 @@
 import NumberKeyboard from '..';
-import { mount } from '../../../test/utils';
+import { mount, trigger } from '../../../test/utils';

 test('click number key', () => {
  const wrapper = mount(NumberKeyboard, {
@ -9,7 +9,10 @@ test('click number key', () => {
    }
  });

-  wrapper.findAll('.van-key').at(0).trigger('click');
+  wrapper
+    .findAll('.van-key')
+    .at(0)
+    .trigger('click');
  expect(wrapper.emitted('input')[0][0]).toEqual(1);

  wrapper.destroy();
@ -17,10 +20,22 @@ test('click number key', () => {

 it('click delete key', () => {
  const wrapper = mount(NumberKeyboard);
-  wrapper.findAll('.van-key').at(11).trigger('click');
+  wrapper
+    .findAll('.van-key')
+    .at(11)
+    .trigger('click');
  expect(wrapper.emitted('delete')).toBeTruthy();
 });

+it('click empty key', () => {
+  const wrapper = mount(NumberKeyboard);
+  wrapper
+    .findAll('.van-key')
+    .at(9)
+    .trigger('click');
+  expect(wrapper.emitted('input')).toBeFalsy();
+});
+
 test('click close button', () => {
  const wrapper = mount(NumberKeyboard, {
    propsData: {
@ -29,31 +44,13 @@ test('click close button', () => {
    }
  });

-  wrapper.findAll('.van-key').at(12).trigger('click');
+  wrapper
+    .findAll('.van-key')
+    .at(12)
+    .trigger('click');
  expect(wrapper.emitted('close')).toBeTruthy();
 });

-test('keey-alive live cycle', () => {
-  const wrapper = mount({
-    template: `
-      <keep-alive>
-        <number-keyboard v-if="show" />
-      </keep-alive>
-    `,
-    props: ['show'],
-    components: { NumberKeyboard }
-  }, {
-    attachToDocument: true,
-    propsData: {
-      show: true
-    }
-  });
-
-  expect(wrapper.vm.$el).toBeTruthy();
-  wrapper.vm.show = false;
-  expect(wrapper.vm.el).toBeFalsy();
-});
-
 test('listen to show/hide event when has transtion', () => {
  const wrapper = mount(NumberKeyboard);
  wrapper.vm.show = true;
@ -76,18 +73,56 @@ test('listen to show event when no transtion', () => {
  expect(wrapper.emitted('hide')).toBeTruthy();
 });

-test('title-left slot', () => {
-  const wrapper = mount({
-    template: `
-      <number-keyboard show>
-        <template v-slot:title-left>Custom Title Left</template>
-      </number-keyboard>
-    `
-  }, {
-    components: {
-      NumberKeyboard
+test('render title', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      title: 'Title',
+      closeButtonText: 'Close'
    }
  });

  expect(wrapper).toMatchSnapshot();
 });
+
+test('title-left slot', () => {
+  const wrapper = mount(NumberKeyboard, {
+    scopedSlots: {
+      'title-left': () => 'Custom Title Left'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('hideOnClickOutside', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      show: true
+    }
+  });
+
+  trigger(document.body, 'touchstart');
+  expect(wrapper.emitted('blur')).toBeTruthy();
+});
+
+test('disable hideOnClickOutside', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      show: true,
+      hideOnClickOutside: false
+    }
+  });
+
+  trigger(document.body, 'touchstart');
+  expect(wrapper.emitted('blur')).toBeFalsy();
+});
+
+test('focus on key', () => {
+  const wrapper = mount(NumberKeyboard);
+
+  const key = wrapper.find('.van-key');
+  trigger(key, 'touchstart');
+  expect(wrapper).toMatchSnapshot();
+  trigger(key, 'touchend');
+  expect(wrapper).toMatchSnapshot();
+});
--- a/packages/number-keyboard/zh-CN.md
+++ b/packages/number-keyboard/zh-CN.md
@ -93,4 +93,5 @@ export default {

 | 名称 | 说明 |
 |------|------|
+| delete | 自定义删除按钮内容 |
 | title-left | 自定义标题栏左侧内容 |