<template>
  <div>
    <!-- <van-password-input
        :value="value"
        info="密码为6位数字"
        @focus="keyboard = 'custom'"
      /> -->
    <van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
    <!-- <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    /> -->
    <van-number-keyboard
      :show="keyboard === 'custom'"
      close-button-text="完成"
      theme="custom"
      extra-key="."
      @blur="keyboard = ''"
      @input="onInput"
      @delete="onDelete"
      @close="onClose"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      showKeyboard: true,
      keyboard: 'default'
    }
  },
  methods: {
    onInput (key) {
      this.value = (this.value + key).slice(0, 5)
    },
    onDelete () {
      this.value = this.value.slice(0, this.value.length - 1)
    },
    onBlur () {
      // console.warn(this.value);
    },
    onClose () {
      this.keyboard = false
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1.8rem 2.5rem;
  width: 15rem;
  button {
    margin-top: 1.2rem;
    position: absolute;
    right: 2.5rem;
  }
  input {
    display: block;
    width: 95%;
    padding: 0.8rem 0.4rem;
    background: #fff;
    border: 1px solid #d6d7dc;
    font-size: 0.95rem;
  }
}
</style>