封装车牌号码输入组件

 

1. <!--
2.     @Title:  国内车辆号牌号码输入组件
3.     @Description: 国内车辆号牌号码输入组件，具体使用方法如下：
4.    
5.     <its-hphmInput v-model="form.hphm" :glbm="'京A'" :parentmessage.sync="hphm" @onChange="provinceAbbreviationChange"></its-hphmInput>
6.    
7.     params:
8.     [   
9.         glbm: 省份地方设置
10.         parentmessage.sync: 初始车牌号码
11.         onChange: 固定的事件名称，用于监听子组件回传参数，名称可自定义，其中'provinceAbbreviationChange'为父组件的响应式方法。使用方法，如下：
12.         provinceAbbreviationChange(result){
13.             console.log('父组件接收到的回传：' + result);
14.         }
15.     ]
17.     @Author: **
18.     @Create Date: ******
19. -->
22. <!-- 使用less编写样式，生效在组件作用域内 -->
23. <style lang="less" scoped>
24.   @import url("./index");
25. </style>
27. <template>
28.   <!-- 唯一根节点 -->
29.   <div class="hphm_box">
30.     <div class="hphm-wite" @click.stop>
31.       <a-auto-complete :disabled="disabled" :dataSource="dataSource" maxlength="8" v-model.tirm="hphm" @select="onSelect" @search="handleSearch" @change="changeAutoComplete" />
32.       <div class="its-province-selBtn" :class="{icon: !glbmTitle}" @click="open">
33.         <template v-if="glbmTitle">
34.           {{glbmTitle}}
35.         </template>
36.         <template v-else>
37.           <i class="itsIcons">&#xea1a;</i>
38.         </template>
39.       </div>
40.       <div class="content" v-show="show">
41.         <!--车牌第一页-->
42.         <div class="first-word-wrap" v-show="showFirst">
43.           <div class="first-word">
44.             <div class="provinceHistoryDiv">
45.               <div class="provinceHistory" v-for="(item, index) in provinceData.provinceHistory" @click="selectProvince(item)" :key="'0' + index">
46.                 <span>{{item}}</span>
47.               </div>
48.             </div>
49.             <div class="province" v-for="(item, index) in provinceData.province" @click="selectProvince(item)" :key="'1' + index">
50.               <span>{{item}}</span>
51.             </div>
52.             <div class="province" v-for="(item, index) in provinceData.provinceGAT" :key="'2' + index" @click="selectProvinceGAT(item)">
53.               <span>{{item}}</span>
54.             </div>
55.             <div class="provinceArmy" v-for="(item, index) in provinceData.provinceArmy" :key="'3' + index" @click="selectProvinceArmy(item)">
56.               <span>{{item}}</span>
57.             </div>
58.             <div class="provinceSpecial" v-for="(item, index) in provinceData.provinceSpecial" :key="'4' + index" @click="selectProvinceSpecial(item)">
59.               <span>{{item}}</span>
60.             </div>
61.             <div class="numTab" @click="changeTab">AB123…</div>
62.           </div>
63.         </div>
64.         <!--车牌第二页-->
65.         <div class="first-word-wrap" v-show="!showFirst">
66.           <div class="first-word">
67.             <div class="provinceNum">
68.               <div class="province" v-for="(item, index) in provinceData.provinceNum" @click="selectNum(item)" :key="'5' + index">
69.                 <span>{{item}}</span>
70.               </div>
71.             </div>
72.             <div class="provinceNull"></div>
73.             <div class="provinceAlphabet">
74.               <div class="province" v-for="(item, index) in provinceData.provinceAlphabet" :key="'6' + index" @click="selectNum(item)">
75.                 <span>{{item}}</span>
76.               </div>
77.             </div>
78.             <div class="btn">
79.               <div class="numTabSecond" @click="changeTab">
80.                 <template v-if="glbmTitle">
81.                   {{glbmTitle}}
82.                 </template>
83.                 <template v-else>
84.                   <i class="itsIcons">&#xea1a;</i>
85.                 </template>
86.               </div>
87.             </div>
88.           </div>
89.         </div>
90.       </div>
91.       <a-icon class="clearTitle" @click="clearHphm" v-if="glbmTitle.length > 0 || hphm.length > 0" type="close-circle" />
92.     </div>
93.   </div>
94.   
95. </template>
97. <script>
98.   export default {
99.     // 页面类型组件必须定义一个唯一组件名称，模块[-目录]-页面连字符格式，否则该组件无法使用keepAlive
100.     name: "hphmWite",
101.     props: {
102.       glbm: { // 省份地方设置
103.         type: String,
104.         default: '京A',
105.       },
106.       disabled: {
107.         // 禁用
108.         type: Boolean,
109.         default: false
110.       },
111.       parentmessage: {
112.         type: String,
113.         default: '',
114.       }
115.     },
116.     data() {
117.       return {
118.         // 省份 数字  字母  数据
119.         provinceData: {
120.           provinceHistory: [],
121.           province: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'],
122.           provinceGAT: ['港', '澳', '台'],
123.           provinceArmy: ['军', '空', '武', '总', '炮', '海'],
124.           provinceSpecial: ['警', '学', '挂', '使', '领'],
125.           provinceNum: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
126.           provinceAlphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
127.         },
128.         // 省份拼音表
129.         provinceList: {
130.           '京': 'jing',
131.           '津': 'jin',
132.           '冀': 'ji',
133.           '晋': 'jin',
134.           '蒙': 'meng',
135.           '辽': 'liao',
136.           '吉': 'ji',
137.           '黑': 'hei',
138.           '沪': 'hu',
139.           '苏': 'su',
140.           '浙': 'zhe',
141.           '皖': 'wan',
142.           '闽': 'min',
143.           '赣': 'gan',
144.           '鲁': 'lu',
145.           '豫': 'yu',
146.           '鄂': 'e',
147.           '湘': 'xiang',
148.           '粤': 'yue',
149.           '桂': 'gui',
150.           '琼': 'qiong',
151.           '渝': 'yu',
152.           '川': 'chuan',
153.           '贵': 'gui',
154.           '云': 'yun',
155.           '藏': 'zang',
156.           '陕': 'shan',
157.           '甘': 'gan',
158.           '青': 'qing',
159.           '宁': 'ning',
160.           '新': 'xin',
161.           '港': 'gang',
162.           '澳': 'ao',
163.           '台': 'tai',
165.           '军': 'jun',
166.           '空': 'kong',
167.           '武': 'wu',
168.           '总': 'zong',
169.           '炮': 'pao',
170.           '海': 'hai',
172.           '警': 'jing',
173.           '学': 'xue',
174.           '挂': 'gua',
175.           '使': 'shi',
176.           '领': 'ling'
177.         },
178.         show: false,
179.         showFirst: true,
180.         // 车牌号码
181.         hphm: '',
182.         // 自动完成的数据源
183.         dataSource: [],
184.         glbmTitle: ''
185.       };
186.     },
187.     watch: {
188.       hphm: {
189.         handler(val, oldVal) {
191.           if (val.length === 0) {
192.             this.showFirst = true;
193.           }
194.           if (val.length === 1) {
195.             this.showFirst = false;
196.           }
197.           if (val.length === 8) {
198.             this.showFirst = true;
199.           }
200.         },
201.         deep: true,
202.         immediate: true
203.       },
204.       parentmessage: {
205.         handler(val, oldVal) {
206.           if(!val) {
207.             this.glbmTitle = ''
208.             return
209.           }
210.           if(val.length < oldVal.length && val.length <=5) {
211.             this.hphm = val
212.           }else if(val.length > oldVal.length && val.length > 6) {
213.             this.glbmTitle = val.substring(0,2)
214.             this.hphm = val.substring(2,val.length)
215.           }
216.         },
217.         deep: true,
218.         immediate: true
219.       },
220.     },
221.     methods: {
222.       clearHphm() {
223.         this.hphm = ''
224.         this.glbmTitle = ''
225.       },
226.       changeTab() {
227.         this.showFirst = !this.showFirst;
228.       },
229.       open() {
230.         if (this.disabled) return false
231.         this.show = !this.show;
232.       },
233.       selectProvince(item) {
234.         this.glbmTitle = item
235.         this.showFirst = false;
236.         // this.hphm = item;
237.         // 获取选择的值，回传数据给父组件
238.         // this.$emit("onChange", this.hphm);
240.         if (this.provinceData.provinceHistory.includes(item)) {
241.           return false;
242.         }
243.         if (this.provinceData.provinceHistory.length > 7) {
244.           this.provinceData.provinceHistory.shift();
245.           this.provinceData.provinceHistory.push(item);
246.           return false;
247.         } else {
248.           this.provinceData.provinceHistory.push(item);
249.         }
250.         localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
251.       },
252.       selectProvinceGAT(item) {
253.         if (this.hphm.length > 7) {
254.           return false;
255.         }
256.         this.hphm = this.hphm + item;
257.         // 获取选择的值，回传数据给父组件
258.         this.$emit("onChange", this.hphm);
259.         if (this.provinceData.provinceHistory.includes(item)) {
260.           return false;
261.         }
262.         if (this.provinceData.provinceHistory.length > 7) {
263.           this.provinceData.provinceHistory.shift();
264.           this.provinceData.provinceHistory.push(item);
265.           return false;
266.         } else {
267.           this.provinceData.provinceHistory.push(item);
268.         }
269.         localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
270.       },
271.       selectProvinceArmy(item) {
272.         if (this.hphm.length > 7) {
273.           return false;
274.         }
275.         this.hphm = this.hphm + item;
276.         // 获取选择的值，回传数据给父组件
277.         this.$emit("onChange", this.hphm);
278.         if (this.provinceData.provinceHistory.includes(item)) {
279.           return false;
280.         }
281.         if (this.provinceData.provinceHistory.length > 7) {
282.           this.provinceData.provinceHistory.shift();
283.           this.provinceData.provinceHistory.push(item);
284.           return false;
285.         } else {
286.           this.provinceData.provinceHistory.push(item);
287.         }
288.         localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
289.       },
290.       selectProvinceSpecial(item) {
291.         if (this.hphm.length > 7) {
292.           return false;
293.         }
294.         this.hphm = this.hphm + item;
295.         // 获取选择的值，回传数据给父组件
296.         this.$emit("onChange", this.hphm);
297.         if (this.provinceData.provinceHistory.includes(item)) {
298.           return false;
299.         }
300.         if (this.provinceData.provinceHistory.length > 7) {
301.           this.provinceData.provinceHistory.shift();
302.           this.provinceData.provinceHistory.push(item);
303.           return false;
304.         } else {
305.           this.provinceData.provinceHistory.push(item);
306.         }
307.         localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
308.       },
309.       selectNum(item) {
310.         // debugger
311.         if(this.glbmTitle.length < 2) {
312.           this.glbmTitle += item
313.         }else {
314.           if (this.hphm && this.hphm.length > 5) {
315.             return false;
316.           }
317.           this.hphm = this.hphm + item;
318.          
319.           // 获取选择的值，回传数据给父组件
320.           this.$emit("onChange", this.glbmTitle + this.hphm);
321.         }
322.         
323.       },
324.       handleSearch(value) {
325.         // console.log("TCL: handleSearch -> value", value)
326.         if (!value) {
327.           this.dataSource = [];
328.           return false;
329.         }
330.         let data = [];
331.         let valueNew = value.toLowerCase();
332.         for (let key in this.provinceList) {
333.           if (this.provinceList[key].startsWith(valueNew)) {
334.             data.push(key);
335.           }
336.         }
337.         this.dataSource = data;
338.       },
339.       onSelect(value) {
340.       },
341.       changeAutoComplete(value) {
342.         // 车牌长度大于8 处理
343.         if (value.length > 7) {
344.           let data = value.substring(0, 8);
345.           value = data;
346.           this.hphm = data;
347.           this.$emit("onChange", this.hphm.toUpperCase());
348.           return false;
349.         }
350.         this.hphm = value;
351.         this.$emit("onChange", this.glbmTitle  + this.hphm.toUpperCase());
352.       },
353.     },
354.     mounted() {
355.       this.glbmTitle = this.glbm
356.       // 获取 省份选择历史
357.       let data = localStorage.getItem('provinceHistory');
358.       if (data) {
359.         let provinceHistory = JSON.parse(data);
360.         this.$set(this.provinceData, 'provinceHistory', provinceHistory);
361.       } else {
362.         this.$set(this.provinceData, 'provinceHistory', []);
363.       }
364.       document.body.addEventListener('click', () => {
365.         this.show = false;
366.       }, false);
367.     }
368.   };
369. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。