uni-app车牌号虚拟软键盘组件

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app车牌号虚拟软键盘组件 手上有一个练手的停车场的项目，需要绑定车牌号，既（省）+（英文大写/数字）。但是现有的键盘是没法满足这个需求的。

鉴于uni-app的强大生态圈，于是我决定做了这个键盘。效果如下

附件可下载

使用方法

<plate-keyboard :type='keyboardType' :show='keyboardShow' [@hit](/user/hit)="hitKeyboard" [@complete](/user/complete)="complete"></plate-keyboard>

Harmonyos Next教程
1 回复

针对uni-app开发中的车牌号虚拟软键盘组件需求，我们可以创建一个自定义组件来实现这一功能。以下是一个简单的示例代码，展示了如何创建一个车牌号输入的虚拟软键盘组件。

首先，我们创建一个名为CarPlateKeyboard.vue的组件文件：

<template>
  <view class="keyboard-container">
    <view class="plate-input-container">
      <input type="text" v-model="plateNumber" maxlength="7" @focus="showKeyboard" placeholder="请输入车牌号" />
    </view>
    <view v-if="isKeyboardVisible" class="keyboard">
      <view class="key" v-for="(char, index) in keys" :key="index" @click="inputChar(char)">
        {{ char }}
      </view>
      <view class="key delete" @click="deleteChar">⌫</view>
      <view class="key done" @click="hideKeyboard">完成</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      plateNumber: '',
      isKeyboardVisible: false,
      keys: ['京', '沪', '津', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    };
  },
  methods: {
    showKeyboard() {
      this.isKeyboardVisible = true;
    },
    hideKeyboard() {
      this.isKeyboardVisible = false;
      this.$emit('input', this.plateNumber);
    },
    inputChar(char) {
      this.plateNumber += char;
    },
    deleteChar() {
      this.plateNumber = this.plateNumber.slice(0, -1);
    }
  }
};
</script>

<style scoped>
.keyboard-container {
  position: relative;
}
.plate-input-container {
  margin-bottom: 10px;
}
.keyboard {
  display: flex;
  flex-wrap: wrap;
}
.key {
  flex: 1 0 25%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.delete, .done {
  flex: 1 0 50%;
}
</style>

在父组件中使用这个自定义键盘组件：

<template>
  <view>
    <CarPlateKeyboard @input="handleInput" />
  </view>
</template>

<script>
import CarPlateKeyboard from '@/components/CarPlateKeyboard.vue';

export default {
  components: {
    CarPlateKeyboard
  },
  methods: {
    handleInput(plateNumber) {
      console.log('车牌号:', plateNumber);
    }
  }
};
</script>

这个示例代码创建了一个简单的车牌号虚拟软键盘组件，包含了常见的车牌号字符和基本的输入、删除、完成功能。你可以根据实际需求进一步扩展和优化这个组件。

回到顶部