TS+vue2组件形式写车牌选择功能

组件 

<template>
  <div style="height:100%;width:100%;position:relative">
    <el-dialog title="选择车牌" :visible.sync="carCardVisible" width="30%" append-to-body :close-on-click-modal="false">
      <div style="height:500px">
        <el-input size="small" v-popover:popover clearable v-model="carNo" />
        <el-popover ref="popover" width="332" popper-class="car_no_popover" v-model="visible" trigger="click">
          <div class="row_div">
            <div class="every_div" v-for="item in area">
              <button @click="selectCarNo(item)">{{ item }}</button>
            </div>
          </div>
          <div class="row_div">
            <div class="every_div" v-for="item in areaLetter">
              <button @click="selectCarNo(item)">{{ item }}</button>
            </div>
          </div>
          <div class="row_div">
            <div class="every_div" v-for="item in areaDigit">
              <button @click="selectCarNo(item)">{{ item }}</button>
            </div>
            <div class="btn_div">
              <el-button type="primary" size="mini" icon="el-icon-back" @click="backBtnHandle"></el-button>
              <el-button type="primary" size="mini" @click="visible = false">确认</el-button>
              <el-button type="primary" size="mini" @click="clearBtnHandle">清除</el-button>
            </div>
          </div>
        </el-popover>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import PageBase from '@src/views/PageBase'
import { Route } from 'vue-router'
import {} from '../../../deliverPetroleum_apis/index_api'
/***贮运厂总览 */
@Component({
  components: {}
})
export default class Index extends PageBase {
  private carCardVisible: boolean = false
  public opendialogCarCard() {
    this.carCardVisible = true
  }
  private area: any[] = ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '贵', '粤', '青', '藏', '川', '宁', '琼']
  private areaLetter: any[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  private areaDigit: any[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']

  private visible: boolean = false
  private carNo: string = ''
  private selectCarNo(item) {
    this.carNo = this.carNo + item
    this.$emit('update:modelValue', this.carNo)
  }
  private backBtnHandle() {
    if (this.carNo.length > 0) {
      this.carNo = this.carNo.substring(0, this.carNo.length - 1)
      this.$emit('update:modelValue', this.carNo)
    }
  }
  private clearBtnHandle() {
    this.carNo = ''
    this.$emit('update:modelValue', this.carNo)
  }
  // @Emit('onSure')
  // private onSure(data: any, optionType: string) {}
}
</script>
<style lang="less" scoped>
.car_no_popover {
  margin-top: 18px !important;
  .row_div {
    display: flex;
    flex-wrap: wrap;

    .btn_div {
      position: absolute;
      right: 13px;
      bottom: 11px;
      button {
        height: 22px;
        padding: 4px 13px;
      }
    }
  }

  .every_div {
    margin-left: 4px;
    margin-top: 4px;

    button {
      width: 30px;
      cursor: pointer;
    }
  }
}
</style>