微信小程序——自定义键盘：自定义组件和父组件通过事件进行属性同步

最新推荐文章于 2025-06-09 16:12:20 发布

Semoon呐

最新推荐文章于 2025-06-09 16:12:20 发布

阅读量3.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序停车场项目

本文链接：https://blog.youkuaiyun.com/weixin_43974907/article/details/88647520

本文介绍了微信小程序中如何创建一个自定义键盘组件，并通过事件实现与父组件之间的属性同步。组件支持自定义样式、跳转键盘功能，并包含车牌号的长度及正则校验。详细内容包括页面样式设计、业务需求分析、项目结构展示以及关键代码展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序——自定义键盘：自定义组件和父组件通过事件进行属性同步

自定义组件触发事件时，需要在自定义组件中使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
在对组件进行封装时在当前页面想要获取组件中的某一状态，需要使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将想要的属性拿到，第三个参数文档中有介绍。

3.组件中的方法要在调用组件的wxml中全部声明，否则不起作用
4.亮点：

键盘样式人性化
可跳转键盘
对车牌号长度有校验
对车牌号有正则校验

1. 页面样式

在这里插入图片描述

2.业务需求

自定义键盘，先触发地域键盘，再触发数字字母键盘，字母键盘可以返回到地域键盘。

3.项目结构

addcar中调用组建panel的方法
在这里插入图片描述

3.代码

一、组件的内容
panel.js


Component({

  externalClasses: ['v-panel'],

  properties: {
    isShow: {
      type: Boolean,
      value: false,
    },
    buttonBorder: {
      type: String,
      value: "1px solid #ccc"
    },
    backgroundColor: {
      type: String,
      value: "#fff"
    },
    //1为省份键盘，其它为英文键盘
    keyBoardType: {
      type: Number,
      value: 1,
    }
  },
  data: {
    keyVehicle1: '京沪粤津冀豫云辽黑湘',
    keyVehicle2: '皖鲁新苏浙赣鄂桂甘',
    keyVehicle3: '晋蒙陕吉闽贵渝川',
    keyVehicle4: '青藏琼宁使领',
    keyNumber: '1234567890挂',
    keyEnInput1: 'QWERTYUIOP学',
    keyEnInput2: 'ASDFGHJKL警',
    keyEnInput3: 'ZXCVBNM港澳',
  },
  methods: {
    vehicleTap: function (event) {
      console.log("panel")
      let val = event.target.dataset.value;
      console.log("panel:"+val)
      switch (val) {
        case 'delete':
          this.triggerEvent('delete');
          this.triggerEvent('inputchange');
          break;
        case 'ok':
          this.triggerEvent('ok');
          break;
        case 'back':
          this.triggerEvent('back');
          console.log("返回")
          break;
        default:
          this.triggerEvent('inputchange', val);
      }
    },
  }
});

panel.json

{
  "component":true
}

panel.wxml

<view wx:if="{
  
  {isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{
  
  {backgroundColor}}">
  <!--省份简写键盘-->
  <block wx:if="{
  
  {keyBoardType === 1}}">
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{
  
  {buttonBorder}}" wx:for="{
  
  {keyVehicle1}}" bindtap='vehicleTap' data-value="{
  
  {item}}" wx:for-index="idx" wx:key="idx">{
  
  {item}}</view>
    </view>
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{
  
  {buttonBorder}}" wx:for="{
  
  {keyVehicle2}}" bindtap='vehicleTap' data-value="{
  
  {item}}" wx:for-index="idx" wx:key="idx">{
  
  {item}}</view>
    </view>
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{
  
  {buttonBorder}}" wx:for="{
  
  {keyVehicle3}}" bindtap='vehicleTap' data-value="{
  
  {item}}" wx:for-index="idx" wx:key="idx">{
  
  {item}}</view>
    </view>
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' bindtap='vehicleTap' data-value="{
  
  {item}}" wx:for="{
  
  {keyVehicle4}}" style="border:{
  
  {buttonBorder}}"