Vue2移动端（H5项目）项目封装车牌选择组件

wocwin
421 阅读4分钟

一、最终效果

在这里插入图片描述

二、参数配置

1、代码示例：

<t-keyword
     :isShow="isShow"
     @ok="isShow=false"
     @cancel="isShow=false"
     @inputchange="inputchange"
     :finalValue="trailerNo"
    />

2、配置参数（TKeyword Attributes）的属性

参数说明类型默认值
isShow是否弹起键盘Booleanfalse
cancelColor取消字体颜色String#2072ED
confirmColor确认背景颜色String#2072ED
isShowMask是否显示遮罩Booleantrue
isClickMask是否点击遮罩关闭键盘Booleantrue
maxLength最大输入长度Number8
finalValue最终显示的值 (下拉框顶部)String-

3、events 事件

事件名说明返回值
inputchange选中车牌键盘选中的值和最大输入长度
cancel点击取消按钮时触发-
ok点击确定按钮时触发-
delete点击键盘清除键，-

三、具体页面使用

<template>
  <div class="start_judging_scrap_steel">
  <van-field
     v-model="trailerNo"
      center
      clearable
      label="车牌号"
      @focus="isShow=true"
      placeholder="请输入车牌号"
      />
    <t-keyword
      :isShow="isShow"
      @ok="isShow=false"
      @cancel="isShow=false"
      @inputchange="inputchange"
      :finalValue="trailerNo"
    />
  </div>
</template>
<script>
export default {
  name: 'startJudgingScrapSteel',
  data() {
    return {
      isShow: false,
      trailerNo: '', // 车牌号
    }
  },
  methods: {
    // 输入车牌号
    inputchange(val, maxLength) {
      if (this.trailerNo.length >= maxLength && val !== 'delete') {
        return false
      }
      if (val === 'delete') {
        this.trailerNo = this.trailerNo.slice(0, this.trailerNo.length - 1)
      } else {
        this.trailerNo += val.toUpperCase()
      }
    },
  },
};
</script>

三、源码

<template>
  <div class="panel-wrap" v-if="isShow" data-value="exit" @click="colse_da">
    <div class="mask_layer" v-if="isShowMask"></div>
    <div class="vehicle-panel" :style="{background:backgroundColor}" @click.stop>
      <div class="topItem">
        <div class="check" @click.stop="check">中/英切换</div>
        <div class="contentShow" v-if="finalValue">最终值：{{finalValue}}</div>
        <div class="exit" :style="{color:cancelColor}" @click.stop="vehicleTap('cancel')">取消</div>
      </div>
      <!--省份简写键盘-->
      <div v-if="keyBoardType === 1">
        <div class="vehicle-panel-row_province">
          <div
            class="vehicle-panel-row-button"
            :style="{border:buttonBorder}"
            v-for="(item,idx) in keyVehicle1"
            @click.stop="vehicleTap(item)"
            :key="idx+item"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row_province">
          <div
            class="vehicle-panel-row-button"
            :style="{border:buttonBorder}"
            v-for="(item,idx) in keyVehicle2"
            @click.stop="vehicleTap(item)"
            :key="idx+item"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row_province">
          <div
            class="vehicle-panel-row-button"
            :style="{border:buttonBorder}"
            v-for="(item,idx) in keyVehicle3"
            @click.stop="vehicleTap(item)"
            :key="idx+item"
          >{{item}}</div>
        </div>

        <div class="vehicle-panel-row_province">
          <div
            class="vehicle-panel-row-button vehicle-panel-row-button-last"
            @click.stop="vehicleTap(item)"
            v-for="(item,idx) in keyVehicle4"
            :style="{border:buttonBorder}"
            :key="idx+item"
          >{{item}}</div>
          <div
            :style="{border:buttonBorder}"
            class="vehicle-panel-row-button vehicle-panel-row-button-img"
          >
            <van-icon
              class="vehicle-en-button-delete"
              name="close"
              @click.stop="vehicleTap('delete')"
            />
          </div>
        </div>
      </div>
      <!--英文键盘  -->
      <div v-else>
        <div class="vehicle-panel-row">
          <div
            class="vehicle-panel-row-button vehicle-panel-row-button-number"
            @click.stop="vehicleTap(item)"
            v-for="(item,idx) in keyNumber"
            :style="{border:buttonBorder}"
            :key="item+idx"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row">
          <div
            class="vehicle-panel-row-button"
            :style="{border:buttonBorder}"
            v-for="(item,idx) in keyEnInput1"
            @click.stop="vehicleTap(item)"
            :key="idx+item"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row">
          <div
            class="vehicle-panel-row-button"
            :style="{border:buttonBorder}"
            v-for="(item,idx) in keyEnInput2"
            @click.stop="vehicleTap(item)"
            :key="idx+item"
          >{{item}}</div>
          <div
            :style="{border:buttonBorder}"
            class="vehicle-panel-row-button vehicle-panel-row-button-img"
          >
            <van-icon
              class="vehicle-en-button-delete"
              name="close"
              @click.stop="vehicleTap('delete')"
            />
          </div>
        </div>
        <div class="vehicle-panel-row-last">
          <div
            class="vehicle-panel-row-button vehicle-panel-row-button-last"
            @click.stop="vehicleTap(item)"
            :style="{border:buttonBorder}"
            v-for="(item,idx) in keyEnInput3"
            :key="idx+item"
          >{{item}}</div>
          <div
            :style="{border:buttonBorder,backgroundColor:confirmColor}"
            class="vehicle-panel-row-button vehicle-panel-ok"
            @click.stop="vehicleTap('ok')"
          >确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import variables from '@/assets/css/variables.scss'
export default {
  name: 'TKeyword',
  props: {
    // 是否弹起键盘
    isShow: {
      type: Boolean,
      default: false
    },
    // 取消字体颜色
    cancelColor: {
      type: String,
      default: `#2072ED`
    },
    // 是否显示遮罩
    isShowMask: {
      type: Boolean,
      default: true
    },
    // 是否点击遮罩关闭键盘
    isClickMask: {
      type: Boolean,
      default: true
    },
    // 最大输入长度
    maxLength: {
      type: Number,
      default: 8
    },
    // 确认背景颜色
    confirmColor: {
      type: String,
      default: `#2072ED`
    },
    // 最终显示的值
    finalValue: {
      type: String
    }
  },
  data() {
    return {
      keyVehicle1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
      keyVehicle2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
      keyVehicle3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
      keyVehicle4: ['陕', '甘', '青', '宁', '新', 'W'],
      keyNumber: '1234567890',
      keyEnInput1: 'QWERTYUP', // 没有IO
      keyEnInput2: 'ASDFGHJKL',
      keyEnInput3: 'ZXCVBNM',
      backgroundColor: '#fff',
      keyBoardType: 1,
      buttonBorder: '1px solid #ccc'
    }
  },
  methods: {
    vehicleTap(event) {
      console.log(event)
      if (/^[\u4e00-\u9fa5]/.test(event)) {
        this.keyBoardType = 2
      }
      switch (event) {
        case 'delete':
          this.$emit('delete')
          this.$emit('inputchange', event, this.maxLength)
          break
        case 'ok':
          this.$emit('ok')
          break
        case 'cancel':
          this.$emit('cancel')
          break
        default:
          this.$emit('inputchange', event, this.maxLength)
      }
    },
    // 点击遮罩关闭键盘mask-layer
    colse_da() {
      if (!this.isClickMask) {
        return
      }
      this.$emit('cancel')
    },
    check() {
      if (this.keyBoardType === 1) {
        this.keyBoardType = 2
      } else if (this.keyBoardType === 2) {
        this.keyBoardType = 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:host {
  width: 100%;
}

.panel-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  .mask_layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .vehicle-panel {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1000;
    background: #fff;
    padding-bottom: 10px;
  }
  .vehicle-panel-row_province {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vehicle-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .vehicle-panel-row-last {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .vehicle-panel-row-button {
    background-color: #fff;
    margin: 0 1vw;
    margin-top: 8px;
    width: 8.8vw;
    height: 40px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vehicle-panel-row-button-number {
    background-color: #eee;
  }
  .vehicle-panel-row-button-last {
    width: 8.8vw;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vehicle-hover {
    background-color: #ccc;
  }
  .vehicle-panel-row-button-img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vehicle-en-button-delete {
    width: 8.8vw;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vehicle-panel-ok {
    background-color: #355db4;
    color: #fff;
    width: 50px;
    height: 40px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .topItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 16px;
    border: 1px solid #ebedf0;
    .check {
      margin-left: 10px;
      color: #355db4;
      flex: 0.5;
    }
    .exit {
      margin-left: 0;
      margin-right: 10px;
      flex: 0.5;
      text-align: right;
    }
    .contentShow {
      text-align: center;
      flex: 1;
    }
  }
}
</style>

相关文章

基于ElementUi再次封装基础组件文档

基于ant-design-vue再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

avatar
文章
阅读
粉丝