vue2-client 1.9.78 → 1.9.79

package/src/base-client/components/common/XLicensePlate/XLicensePlate.vue

@@ -1,193 +1,193 @@
-<template>
-  <div>
-    <div @click="openSelectLicensePlate" class="clickable-input">
-      <a-input :placeholder="placeholder" v-model="licensePlate" readonly class="clickable-input"/>
-    </div>
-    <a-modal v-model="licensePlateShow" title="选择车牌号" :bodyStyle="{height:'auto'}" @ok="okHandle" :zIndex="1901">
-      <div class="license-plate_container">
-        <!-- 输入框 -->
-        <div @click="onSlotClick">
-          <div class="input_container">
-            <a-space>
-              <div style="margin: 0;padding: 0" v-for="(item, index) in 2" :key="`${item}_${inputValue[index]}`">
-                <a-input
-                  v-model="inputValue[index]"
-                  @click.stop="inputClick(index)"
-                  style="width: 2.3rem"
-                  :maxLength="1">
-                </a-input>
-              </div>
-              <b>·</b>
-              <div style="margin: 0;padding: 0" v-for="(item, index) in 6" :key="`${item}_${inputValue[index]}`">
-                <a-input
-                  v-model="inputValue[index+2]"
-                  @click.stop="inputClick(index+2)"
-                  style="width: 2.3rem"
-                  :maxLength="1">
-                </a-input>
-              </div>
-            </a-space>
-          </div>
-        </div>
-        <!-- 键盘 -->
-        <div class="keyboard_container">
-          <a-row type="flex">
-            <a-col v-if="activeIndex === 0" span="3" v-for="item in provinceList" :key="item">
-              <a-button
-                class="button"
-                @click="btnClick(item)"> {{ item }}
-              </a-button>
-            </a-col>
-            <a-col span="3" v-if="activeIndex !== 0" v-for="(item, index) of numberList" :key="item">
-              <a-button
-                class="button"
-                @click="btnClick(item, activeIndex === 1)"
-                :disabled="activeIndex === 1 && index < 10"> {{ item }}
-              </a-button>
-            </a-col>
-            <a-col span="3" v-if="activeIndex !== 0" v-for="item of letterList" :key="item">
-              <a-button
-                class="button"
-                @click="btnClick(item, item === 'O' && activeIndex > 1)"
-                :disabled="item === 'O' && activeIndex > 1"> {{ item }}
-              </a-button>
-            </a-col>
-            <a-col span="3" v-if="activeIndex !== 0" v-for="item of charList" :key="item">
-              <a-button
-                class="button"
-                @click="btnClick(item, activeIndex < 5)"
-                :disabled="activeIndex < 7"> {{ item }}
-              </a-button>
-            </a-col>
-            <a-button type="dashed" v-if="activeIndex !== 0" @click="delClick" class="button last-button">
-              <a-icon type="swap-left"/>
-              删除
-            </a-button>
-          </a-row>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-const LICENSE_PLATE_RULE = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳使领]$/
-export default {
-  name: 'XLicensePlate',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    placeholder: {
-      type: String,
-      default: '请输入车牌号'
-    },
-  },
-  data () {
-    return {
-      provinceList: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '临'],
-      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      letterList: ['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'],
-      charList: ['警', '领', '港', '澳', '挂', '学'],
-      activeIndex: -1,
-      inputValue: ['', '', '', '', '', '', '', ''],
-      licensePlateShow: false
-    }
-  },
-  computed: {
-    licensePlate () {
-      return this.inputValue.join('')
-    }
-  },
-  watch: {
-    value () {
-      this.initLicensePlate()
-    }
-  },
-  mounted () {
-    this.initLicensePlate()
-    this.activeIndex = 0
-  },
-  methods: {
-    okHandle () {
-      this.licensePlateShow = false
-      this.change()
-    },
-    openSelectLicensePlate () {
-      this.licensePlateShow = true
-    },
-    initLicensePlate () {
-      if (this.value && LICENSE_PLATE_RULE.test(this.value)) {
-        this.inputValue = this.value.split('')
-      }
-    },
-    onSlotClick (event) {
-      const length = this.inputValue.filter(it => it).length
-      this.activeIndex = length == 0 ? 0 : length - 1
-    },
-    inputClick (index, event) {
-      this.activeIndex = index
-    },
-    btnClick (val, disabled) {
-      if (disabled) {
-        return false
-      }
-      this.$set(this.inputValue, this.activeIndex, `${val}`)
-      this.activeIndex++
-      this.change()
-    },
-    delClick () {
-      if (this.inputValue[this.activeIndex]) {
-        this.$set(this.inputValue, this.activeIndex, ``)
-      } else {
-        this.$set(this.inputValue, this.activeIndex - 1, ``)
-        this.activeIndex--
-      }
-      this.change()
-    },
-    change () {
-      const value = this.inputValue.join('')
-      const pass = LICENSE_PLATE_RULE.test(value)
-      this.$emit('change', {
-        array: this.inputValue.filter(it => it !== ''),
-        value: value,
-        pass: pass,
-      })
-      this.$emit('input', value)
-    }
-  }
-}
-</script>
-
-<style lang='less' scoped>
-.license-plate_container {
-  box-sizing: border-box;
-
-  .input_container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-  }
-
-  .keyboard_container {
-    width: 100%;
-    height: auto;
-    background-color: #e2e3e7;
-    padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px) 5px;
-    box-sizing: border-box;
-    text-align: center;
-
-    .button {
-      margin: 2px;
-      width: 2.8rem;
-    }
-
-    .last-button {
-      width: auto;
-      margin-left: 7px;
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div @click="openSelectLicensePlate" class="clickable-input">
+      <a-input :placeholder="placeholder" v-model="licensePlate" readonly class="clickable-input"/>
+    </div>
+    <a-modal v-model="licensePlateShow" title="选择车牌号" :bodyStyle="{height:'auto'}" @ok="okHandle" :zIndex="1901">
+      <div class="license-plate_container">
+        <!-- 输入框 -->
+        <div @click="onSlotClick">
+          <div class="input_container">
+            <a-space>
+              <div style="margin: 0;padding: 0" v-for="(item, index) in 2" :key="`${item}_${inputValue[index]}`">
+                <a-input
+                  v-model="inputValue[index]"
+                  @click.stop="inputClick(index)"
+                  style="width: 2.3rem"
+                  :maxLength="1">
+                </a-input>
+              </div>
+              <b>·</b>
+              <div style="margin: 0;padding: 0" v-for="(item, index) in 6" :key="`${item}_${inputValue[index]}`">
+                <a-input
+                  v-model="inputValue[index+2]"
+                  @click.stop="inputClick(index+2)"
+                  style="width: 2.3rem"
+                  :maxLength="1">
+                </a-input>
+              </div>
+            </a-space>
+          </div>
+        </div>
+        <!-- 键盘 -->
+        <div class="keyboard_container">
+          <a-row type="flex">
+            <a-col v-if="activeIndex === 0" span="3" v-for="item in provinceList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item)"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-col span="3" v-if="activeIndex !== 0" v-for="(item, index) of numberList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item, activeIndex === 1)"
+                :disabled="activeIndex === 1 && index < 10"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-col span="3" v-if="activeIndex !== 0" v-for="item of letterList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item, item === 'O' && activeIndex > 1)"
+                :disabled="item === 'O' && activeIndex > 1"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-col span="3" v-if="activeIndex !== 0" v-for="item of charList" :key="item">
+              <a-button
+                class="button"
+                @click="btnClick(item, activeIndex < 5)"
+                :disabled="activeIndex < 7"> {{ item }}
+              </a-button>
+            </a-col>
+            <a-button type="dashed" v-if="activeIndex !== 0" @click="delClick" class="button last-button">
+              <a-icon type="swap-left"/>
+              删除
+            </a-button>
+          </a-row>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+const LICENSE_PLATE_RULE = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳使领]$/
+export default {
+  name: 'XLicensePlate',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入车牌号'
+    },
+  },
+  data () {
+    return {
+      provinceList: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '临'],
+      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      letterList: ['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'],
+      charList: ['警', '领', '港', '澳', '挂', '学'],
+      activeIndex: -1,
+      inputValue: ['', '', '', '', '', '', '', ''],
+      licensePlateShow: false
+    }
+  },
+  computed: {
+    licensePlate () {
+      return this.inputValue.join('')
+    }
+  },
+  watch: {
+    value () {
+      this.initLicensePlate()
+    }
+  },
+  mounted () {
+    this.initLicensePlate()
+    this.activeIndex = 0
+  },
+  methods: {
+    okHandle () {
+      this.licensePlateShow = false
+      this.change()
+    },
+    openSelectLicensePlate () {
+      this.licensePlateShow = true
+    },
+    initLicensePlate () {
+      if (this.value && LICENSE_PLATE_RULE.test(this.value)) {
+        this.inputValue = this.value.split('')
+      }
+    },
+    onSlotClick (event) {
+      const length = this.inputValue.filter(it => it).length
+      this.activeIndex = length == 0 ? 0 : length - 1
+    },
+    inputClick (index, event) {
+      this.activeIndex = index
+    },
+    btnClick (val, disabled) {
+      if (disabled) {
+        return false
+      }
+      this.$set(this.inputValue, this.activeIndex, `${val}`)
+      this.activeIndex++
+      this.change()
+    },
+    delClick () {
+      if (this.inputValue[this.activeIndex]) {
+        this.$set(this.inputValue, this.activeIndex, ``)
+      } else {
+        this.$set(this.inputValue, this.activeIndex - 1, ``)
+        this.activeIndex--
+      }
+      this.change()
+    },
+    change () {
+      const value = this.inputValue.join('')
+      const pass = LICENSE_PLATE_RULE.test(value)
+      this.$emit('change', {
+        array: this.inputValue.filter(it => it !== ''),
+        value: value,
+        pass: pass,
+      })
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+.license-plate_container {
+  box-sizing: border-box;
+
+  .input_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+  }
+
+  .keyboard_container {
+    width: 100%;
+    height: auto;
+    background-color: #e2e3e7;
+    padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px) 5px;
+    box-sizing: border-box;
+    text-align: center;
+
+    .button {
+      margin: 2px;
+      width: 2.8rem;
+    }
+
+    .last-button {
+      width: auto;
+      margin-left: 7px;
+    }
+  }
+}
+</style>

package/src/base-client/components/common/XLicensePlate/XLicensePlateDemo.vue

@@ -1,48 +1,48 @@
-<template>
-  <div>
-    <x-license-plate @change="change" v-model="licensePlate" :autoShow="false"/>
-  </div>
-</template>
-
-<script>
-import XLicensePlate from './XLicensePlate.vue'
-export default {
-  name: 'XLicensePlateDemo',
-  components: {
-    XLicensePlate
-  },
-  props: {
-    placeholder: {
-      type: String,
-      default: '请输入车牌号'
-    }
-  },
-  data () {
-    return {
-      licensePlate: '陕A1G78D',
-    }
-  },
-  filters: {},
-  created () {
-  },
-  watch: {
-    licensePlate (vale) {
-      console.log('监听model变化', vale)
-    }
-  },
-  methods: {
-    change (a) {
-      console.log(a, this.licensePlate)
-      console.log('数组形式:' + a.array)
-      console.log('字符串形式:' + a.value)
-      console.log('是否验证通过:' + a.pass)
-    }
-  }
-}
-</script>
-<style scoped>
-.clickable-input input {
-  pointer-events: none;
-  cursor: pointer;
-}
-</style>
+<template>
+  <div>
+    <x-license-plate @change="change" v-model="licensePlate" :autoShow="false"/>
+  </div>
+</template>
+
+<script>
+import XLicensePlate from './XLicensePlate.vue'
+export default {
+  name: 'XLicensePlateDemo',
+  components: {
+    XLicensePlate
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: '请输入车牌号'
+    }
+  },
+  data () {
+    return {
+      licensePlate: '陕A1G78D',
+    }
+  },
+  filters: {},
+  created () {
+  },
+  watch: {
+    licensePlate (vale) {
+      console.log('监听model变化', vale)
+    }
+  },
+  methods: {
+    change (a) {
+      console.log(a, this.licensePlate)
+      console.log('数组形式:' + a.array)
+      console.log('字符串形式:' + a.value)
+      console.log('是否验证通过:' + a.pass)
+    }
+  }
+}
+</script>
+<style scoped>
+.clickable-input input {
+  pointer-events: none;
+  cursor: pointer;
+}
+</style>