在 Vant4 中,van-number-keyboard 是用于输入数字的组件。以下是一个简单的例子,演示如何在 Vant4 中使用数字键盘:

首先,确保你已经安装了 Vant4:
npm install vant@next

然后,在你的 Vue 组件中引入 van-number-keyboard:
<template>
  <div>
    <van-number-keyboard
      :show="showKeyboard"
      v-model="inputValue"
      @blur="onBlur"
    />
    <van-field
      v-model="inputValue"
      label="金额"
      placeholder="请输入金额"
      readonly
      @click="showNumberKeyboard"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { NumberKeyboard, Field } from 'vant';
import 'vant/lib/index.css'; // 引入样式

export default {
  components: {
    [NumberKeyboard.name]: NumberKeyboard,
    [Field.name]: Field,
  },
  setup() {
    const showKeyboard = ref(false);
    const inputValue = ref('');

    const showNumberKeyboard = () => {
      showKeyboard.value = true;
    };

    const onBlur = () => {
      // 在这里处理失去焦点事件
      console.log('失去焦点', inputValue.value);
    };

    return {
      showKeyboard,
      inputValue,
      showNumberKeyboard,
      onBlur,
    };
  },
};
</script>

在上面的例子中,我们使用了 van-number-keyboard 组件作为数字键盘的容器,并通过 :show 属性控制数字键盘的显示与隐藏。通过 v-model 指令将数字键盘输入的值与一个 Vue 变量 inputValue 进行双向绑定。

同时,我们使用了 van-field 组件作为输入框,通过设置 readonly 属性禁止直接输入,而是通过点击输入框触发数字键盘的显示。在失去焦点事件 @blur 中,可以处理输入框失去焦点的逻辑。

最后,别忘了引入样式文件,这样样式才能正确应用。


转载请注明出处:http://www.zyzy.cn/article/detail/5806/Vant