Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NumberKeyBoard 在chrome中输出问题 #477

Closed
hangpingping opened this issue Jun 21, 2019 · 1 comment
Closed

NumberKeyBoard 在chrome中输出问题 #477

hangpingping opened this issue Jun 21, 2019 · 1 comment
Assignees
Labels
@Components Components related optimizing Optimize performance or experience

Comments

@hangpingping
Copy link

Mand Mobile Version

mand-mobile v2.3.0

OS Version & Browser Version

window10 x64 chrome 74

Node Version, Package Management Tool

Node v10.15.3 npm v6.9.0 vue-cli 3.5.5 vue 2.6.10

Recurring Steps

App.vue

<template>
  <div id="app">
    <div class="msg">{{ msg }}</div>
    <div class="key-board-wrapper">
      <md-number-keyboard
        v-model="isKeyBoardShow"
        type="simple"
        @enter="onNumberEnter"
        @delete="onNumberDelete"
      ></md-number-keyboard>
    </div>
  </div>
</template>

<script>
import NumberKeyboard from "mand-mobile/components/number-keyboard";
export default {
  name: "app",
  components: {
    [NumberKeyboard.name]: NumberKeyboard
  },
  data() {
    return {
      isKeyBoardShow: true,
      msg: '',
    };
  },
  methods: {
    onNumberEnter(num) {
      this.msg += num;
    },
    onNumberDelete() {
      if (!this.msg) return;
      this.msg = this.msg.substring(0, this.msg.length - 1);
    }
  },
};
</script>

<style lang="stylus">
@import "~reset.css";
@import "~mand-mobile/lib-vw/mand-mobile.css";

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.msg {
  width: 100%;
  height: calc(100vh - 57vw);
  display: flex;
  justify-content: center
  align-items: center;
  font-size: 7vw;
  font-weight: 500vw;
  word-break: break-all
}

body .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item {
  transition: background 0.5s;
}
body .md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.active {
  transition: none;
  background-color: #ff0;
}

</style>

使用chrome浏览器调试模式打开https://didi.github.io/mand-mobile/#/zh-CN/docs/components/form/number-keyboard亦有同样问题

Expectant Behaviors

  1. 点击2,输出2, 数字2区域背景色变黄
  2. 点击2靠下区域, 输出2, 数字2区域背景色变黄

Actual Behaviors

1中结果正常
2中结果输出5,数字5区域背景色变黄
899dc506e7e200b3be063c328b966a9a

@xxyan0205 xxyan0205 self-assigned this Jun 21, 2019
@xxyan0205 xxyan0205 added @Components Components related optimizing Optimize performance or experience labels Jun 21, 2019
xxyan0205 added a commit that referenced this issue Jun 22, 2019
* feat(number-keyboard): add prop isHideConfirm & slot

* example(number-keyboard): update cases

* doc(number-keyboard): update readme

* fix(number-keyboard): avoiding border from being touched by mistake

#477
@hangpingping
Copy link
Author

修复后问题依旧存在问题,例如5-2一边上移一边点击,期望行为是5..52..2,实际上是5..52..25..52..2,猜测是文字也导致误触,使用span包裹文字则期望和实际一致

@xxyan0205 xxyan0205 reopened this Jun 25, 2019
xxyan0205 added a commit that referenced this issue Jul 5, 2019
* fix(number-keyboard): number keys misuse & update style

#477

* test: update snapshots
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
@Components Components related optimizing Optimize performance or experience
Projects
None yet
Development

No branches or pull requests

2 participants