```html
<div class="demo-block" id="keyboard-demo1">
  <section title="第一组demo">
    <p style="padding: 20px">
      第一、二组demo: 搜索页面时用到的键盘
    </p>
    <lx-search
      v-model="test2.searchKey"
      placeholde="搜索"
      @on-search="handleSearch('test2')"
    ></lx-search>
    <lx-search
      v-model="test1.alphanumeric"
      placeholde="搜索"
      @on-focus="test1.showAlphanumeric = true"
      @on-search="handleSearch('test1')"
    >
      <div
        slot="label"
        class="label"
        @click="test1.showProvinces = true"
      >
        <span>{{ test1.provinces }}</span>
        <i class="icon"></i>
      </div>
    </lx-search>
    <lx-keyboard
      v-model="test1.showProvinces"
      @handle-value="handleKeyboardValue($event, 'test1', 'provinces', false)"
      @on-show="handleShowKeyboard('test1', 'Provinces')"
      @on-hide="handleHideKeyboard('test1', 'Provinces')"
    >/<lx-keyboard>
    <lx-keyboard
      v-model="test1.showAlphanumeric"
      type="alphanumeric"
      @handle-value="handleKeyboardValue($event, 'test1', 'alphanumeric', false)"
      @handle-delete="handleKeyboardValue($event, 'test1', 'alphanumeric', true)"
      @on-show="handleShowKeyboard('test1', 'Alphanumeric')"
      @on-hide="handleHideKeyboard('test1', 'Alphanumeric')"
    >/<lx-keyboard>
  </section>
  <lx-group title="第三组demo，单纯调起省份和字母数字弹窗">
    <lx-x-switch
      v-model="test3.showProvinces"
      title="省份键盘"
    ></lx-x-switch>
    <lx-x-switch
      v-model="test3.showAlphanumeric"
      title="字母数字键盘"
    ></lx-x-switch>
    <lx-keyboard
      v-model="test3.showProvinces"
      @handle-value="handleKeyboardValue($event, 'test3', 'provinces', false)"
      @on-show="handleShowKeyboard('test3', 'Provinces')"
      @on-hide="handleHideKeyboard('test3', 'Provinces')"
    ></lx-keyboard>
    <lx-keyboard
      v-model="test3.showAlphanumeric"
      :type="'alphanumeric'"
      @handle-value="handleKeyboardValue($event, 'test3', 'alphanumeric', false)"
      @handle-delete="handleKeyboardValue($event, 'test3', 'alphanumeric', true)"
      @on-show="handleShowKeyboard('test3', 'Alphanumeric')"
      @on-hide="handleHideKeyboard('test3', 'Alphanumeric')"
    >/<lx-keyboard>
  </lx-group>
  <section title="第四组demo">
    <lx-group title="第四组demo，提交数据页面用到键盘">
      <lx-cell
        class="search-box"
        is-link
      >
        <div
          slot="icon"
          class="weui_label"
        >
          车牌号
        </div>
        <lx-x-input
          v-model="test4.alphanumeric"
          :max="7"
          :show-clear="false"
          @on-focus="test4.showAlphanumeric = true"
          :placeholder="'请输入车牌号'"
        >
          <!-- @on-change="change" -->
          <div
            slot="label"
            class="label"
            @click="test4.showProvinces = true"
          >
            <span>{{ test4.provinces }}</span>
            <i class="icon"></i>
          </div>
        </lx-x-input>
      </lx-cell>
    </lx-group>
    <lx-keyboard
      v-model="test4.showProvinces"
      @handle-value="handleKeyboardValue($event, 'test4', 'provinces', false)"
      @on-show="handleShowKeyboard('test4', 'Provinces')"
      @on-hide="handleHideKeyboard('test4', 'Provinces')"
    >/<lx-keyboard>
    <lx-keyboard
      v-model="test4.showAlphanumeric"
      type="alphanumeric"
      @handle-value="handleKeyboardValue($event, 'test4', 'alphanumeric', false)"
      @handle-delete="handleKeyboardValue($event, 'test4', 'alphanumeric', true)"
      @on-show="handleShowKeyboard('test4', 'Alphanumeric')"
      @on-hide="handleHideKeyboard('test4', 'Alphanumeric')"
    >/<lx-keyboard>
  </section>
</div>

<script>
// Keyboard.md
new Vue({
  el: '#keyboard-demo1',
  props: {},
  data: {
    test1: {
      provinces: '粤',
      alphanumeric: '',
      showProvinces: false,
      showAlphanumeric: false
    },
    test2: {
      searchKey: ''
    },
    test3: {
      provinces: '粤',
      alphanumeric: '',
      showProvinces: false,
      showAlphanumeric: false
    },
    test4: {
      provinces: '粤',
      alphanumeric: '',
      showProvinces: false,
      showAlphanumeric: false
    }
  },
  methods: {
    /**
       * @description 显示键盘
       * @param { Object } testValue 测试组的值
       * @param { String } type= 'provinces' || 'alphanumeric' 键盘的类型
       */
    handleShowKeyboard(testValue, type) {
      this[testValue]['show' + type] = true
    },
    /**
       * @description 处理键盘值
       * @param { String } val 键盘的值
       * @param { Object } testValue 测试组的值
       * @param { String } type= 'provinces' || 'alphanumeric' 键盘的类型
       * @param { Boolean } isDel = true || false 是否是删除操作
       */
    handleKeyboardValue(val, testValue, type, isDel) {
      if (isDel) {
        this[testValue][type] = this[testValue][type].substring(0, this[testValue][type].length - 1)
      }
      if (type === 'alphanumeric' && this[testValue][type].length < 7 && !isDel) {
        this[testValue][type] = this[testValue][type] + val
      }
      if (type === 'provinces') {
        this[testValue][type] = val
      }
    },
    /**
       * @description 处理隐藏键盘
       * @param testValue 测试组的值
       * @param type 键盘消失的类型
       */
    handleHideKeyboard(testValue, type) {
      if (type === 'Provinces') {
        this[testValue].showAlphanumeric = true
      }
    },
    /**
       * @description 处理当前测试组搜索
       * @param testValue
       */
    handleSearch(testValue) {
      console.log(testValue + '去搜索')
    }
  }
})
</script>
<style>
  .search-box .weui_cell{
    padding: 0;
  }
  .search-box .vin-label{
    width: 18px;
    height: 13px;
    margin-right: 10px;
    line-height: 40px;
  }
  .search-box .vin-label img{
    display: inline-block;
    width: 100%;
  }
  .search-box .label{
    display: flex;
    align-items: center;
    padding: 10px 8px;
    margin-right: 10px;
    line-height: 30px;
    background-color: #eeeeee;
    border-radius: 4px;
  }
  .search-box .label span{
    display: inline-block;
    font-size: 15px;
    line-height: 8px;
  }
  .search-box .icon{
    display: inline-block;
    margin: 6px 0 0 3px;
    width:0px;
    height:0px;
    border: 6px solid  #5d5c57;
    border-top-color: #5d5c57;
    border-bottom-color:transparent;
    border-left-color:transparent;
    border-right-color:transparent;
  }
  .search:before{
    font-size: 20px;
    color: rgba(0, 0, 0, 0.4);
  }
</style>
```