网站动效怎么做的,wordpress网站欣赏,住房城乡建设部官网,wordpress收费下载UniApp车牌号输入组件封装摘要#xff1a; 该组件提供标准化的车牌号输入功能#xff0c;支持普通车牌和新能源车牌两种类型切换。主要特性包括#xff1a; 智能键盘#xff1a;自动切换省份、字母和数字键盘 新能源车牌支持#xff1a;自动适配9位车牌格式 交互体验…UniApp车牌号输入组件封装摘要 该组件提供标准化的车牌号输入功能支持普通车牌和新能源车牌两种类型切换。主要特性包括 智能键盘自动切换省份、字母和数字键盘 新能源车牌支持自动适配9位车牌格式 交互体验点击车牌位自动弹出对应键盘 双向绑定支持v-model绑定车牌值 可配置性可设置初始车牌类型和是否显示类型选择器 组件采用Vue单文件组件形式开发包含完整的模板、脚本和样式可直接在UniApp项目中引用。通过watch监听value变化实现双向绑定提供plate-type-change事
车牌号输入功能标准的uniapp组件形式方便在项目中调用
!-- components/LicensePlateInput.vue --
templateview classlicense-plate-input!-- 车牌类型选择 --view classplate-type-selector v-ifshowTypeSelectorview classtype-item :class{ active: plateType normal }tapswitchPlateType(normal)普通车牌/viewview classtype-item :class{ active: plateType newEnergy }tapswitchPlateType(newEnergy)新能源车牌/view/view!-- 车牌显示区域 --view classplate-display :classplateTypeview classplate-item :class{ plate-item-active: index activeIndex }v-for(item, index) in displayPlateArray :keyindextapfocusInput(index){{ item || }}/view/view!-- 键盘容器 --u-popup v-modelshowKeyboard modebottom border-radius20view classkeyboard-containerview classkeyboard-headertext classkeyboard-title{{ getKeyboardTitle() }}/textu-icon nameclose clickshowKeyboard false/u-icon/viewview classkeyboard-keysview classkey-item v-for(key, index) in currentKeys :keyindextapselectKey(key){{ key }}/viewview classkey-item key-delete tapdeleteKeyv-ifkeyboardType ! province删除/view/viewview classkeyboard-toggle v-ifkeyboardType ! province plateType normalview classtoggle-btn :class{ active: keyboardType alphabet }tapswitchKeyboard(alphabet)ABC/viewview classtoggle-btn :class{ active: keyboardType number }tapswitchKeyboard(number)123/view/view/view/u-popup/view
/templatescript
export default {name: LicensePlateInput,props: {// 初始车牌类型initPlateType: {type: String,default: normal // normal 或 newEnergy},// 是否显示车牌类型选择器showTypeSelector: {type: Boolean,default: true},// 初始车牌号码value: {type: String,default: }},data() {return {plateType: this.initPlateType,plateArray: new Array(8).fill(),newEnergyPlateArray: new Array(9).fill(),activeIndex: 0,showKeyboard: false,keyboardType: province // province, alphabet, number}},computed: {provinceKeys() {return [京, 津, 冀, 晋, 蒙, 辽, 吉, 黑, 沪, 苏, 浙, 皖, 闽, 赣, 鲁, 豫, 鄂, 湘, 粤, 桂, 琼, 渝, 川, 贵, 云, 藏, 陕, 甘, 青, 宁, 新, 港, 澳, 台, 使, 领, 警, 学, 试]},alphabetKeys() {return [A, B, C, D, E, F, G, H, J, K,L, M, N, P, Q, R, S, T, U, V,W, X, Y, Z]},numberKeys() {return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]},newEnergyKeys() {return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,A, B, C, D, E, F]},currentKeys() {// 新能源车牌特殊处理if (this.plateType newEnergy) {// 新能源车牌最后一位只能是数字或特定字母if (this.activeIndex 8) {return this.newEnergyKeys;}}switch(this.keyboardType) {case province:return this.provinceKeys;case alphabet:return this.alphabetKeys;case number:return this.numberKeys;default:return this.provinceKeys;}},displayPlateArray() {return this.plateType newEnergy ? this.newEnergyPlateArray : this.plateArray;}},watch: {value: {handler(newVal) {if (newVal) {this.setPlateNumber(newVal);}},immediate: true}},methods: {switchPlateType(type) {this.plateType type;this.activeIndex 0;this.showKeyboard false;this.$emit(plate-type-change, type);},focusInput(index) {this.activeIndex index;this.showKeyboard true;// 根据车牌类型和位置确定键盘类型if (this.plateType normal) {if (index 0) {this.keyboardType province;} else if (index 1) {this.keyboardType alphabet;} else {this.keyboardType number;}} else {// 新能源车牌if (index 0) {this.keyboardType province;} else if (index 1) {this.keyboardType alphabet;} else if (index 2 index 7) {this.keyboardType number;} else if (index 8) {// 新能源最后一位可以是数字或特定字母this.keyboardType number;}}},selectKey(key) {// 设置当前位的值if (this.plateType newEnergy) {this.$set(this.newEnergyPlateArray, this.activeIndex, key);} else {this.$set(this.plateArray, this.activeIndex, key);}// 自动跳转到下一位const maxIndex this.plateType newEnergy ? 8 : 7;if (this.activeIndex maxIndex) {this.activeIndex;// 根据车牌类型和位置自动切换键盘类型if (this.plateType normal) {if (this.activeIndex 1) {this.keyboardType alphabet;} else {this.keyboardType number;}} else {// 新能源车牌if (this.activeIndex 1) {this.keyboardType alphabet;} else if (this.activeIndex 2 this.activeIndex 7) {this.keyboardType number;} else if (this.activeIndex 8) {this.keyboardType number;}}} else {// 最后一位输入完成后隐藏键盘this.showKeyboard false;}// 触发输入事件this.$emit(input, this.getPlateNumber());},deleteKey() {if (this.activeIndex 0) {// 清空当前位if (this.plateType newEnergy) {this.$set(this.newEnergyPlateArray, this.activeIndex, );} else {this.$set(this.plateArray, this.activeIndex, );}// 如果当前位已空则跳转到上一位if (this.getCurrentPlateArray()[this.activeIndex] ) {this.activeIndex--;}} else {// 第一位时直接清空if (this.plateType newEnergy) {this.$set(this.newEnergyPlateArray, this.activeIndex, );} else {this.$set(this.plateArray, this.activeIndex, );}}// 触发输入事件this.$emit(input, this.getPlateNumber());},switchKeyboard(type) {this.keyboardType type;},getKeyboardTitle() {if (this.plateType newEnergy this.activeIndex 8) {return 选择数字或字母(A-F);}switch(this.keyboardType) {case province:return 选择省份;case alphabet:return 选择字母;case number:return 选择数字;default:return 选择字符;}},getCurrentPlateArray() {return this.plateType newEnergy ? this.newEnergyPlateArray : this.plateArray;},getPlateNumber() {const plateArray this.plateType newEnergy ? this.newEnergyPlateArray : this.plateArray;return plateArray.join();},// 设置车牌号码setPlateNumber(plateNumber) {if (!plateNumber) return;const len plateNumber.length;if (len 8) {this.plateType normal;for (let i 0; i 8; i) {this.$set(this.plateArray, i, plateNumber[i] || );}} else if (len 9) {this.plateType newEnergy;for (let i 0; i 9; i) {this.$set(this.newEnergyPlateArray, i, plateNumber[i] || );}}},// 清空车牌号码clearPlate() {this.plateArray new Array(8).fill();this.newEnergyPlateArray new Array(9).fill();this.activeIndex 0;this.$emit(input, );}}
}
/scriptstyle langscss scoped
.license-plate-input {padding: 20rpx;
}.plate-type-selector {display: flex;justify-content: center;margin-bottom: 30rpx;
}.type-item {padding: 15rpx 30rpx;border: 2rpx solid #ddd;border-radius: 50rpx;margin: 0 20rpx;font-size: 28rpx;.active {background-color: #2979ff;color: #fff;border-color: #2979ff;}
}.plate-display {display: flex;justify-content: center;margin-bottom: 40rpx;.normal .plate-item {width: 60rpx;}.newEnergy .plate-item {width: 55rpx;}
}.plate-item {height: 100rpx;border: 2rpx solid #ddd;display: flex;align-items: center;justify-content: center;font-size: 36rpx;font-weight: bold;margin: 0 5rpx;border-radius: 8rpx;.plate-item-active {border-color: #2979ff;box-shadow: 0 0 10rpx rgba(41, 121, 255, 0.3);}
}.keyboard-container {background-color: #f5f5f5;padding: 20rpx;
}.keyboard-header {display: flex;justify-content: space-between;align-items: center;padding: 20rpx 0;border-bottom: 2rpx solid #eee;
}.keyboard-title {font-size: 32rpx;font-weight: bold;
}.keyboard-keys {display: flex;flex-wrap: wrap;justify-content: flex-start;padding: 20rpx 0;max-height: 500rpx;overflow-y: auto;
}.key-item {width: calc(10% - 10rpx);height: 70rpx;background-color: #fff;border-radius: 10rpx;display: flex;align-items: center;justify-content: center;margin: 10rpx 5rpx;font-size: 32rpx;box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);.key-delete {background-color: #ff5a5f;color: #fff;width: 15%;}
}.keyboard-toggle {display: flex;justify-content: center;padding: 20rpx 0;
}.toggle-btn {padding: 10rpx 30rpx;background-color: #e0e0e0;border-radius: 30rpx;margin: 0 20rpx;font-size: 28rpx;.active {background-color: #2979ff;color: #fff;}
}
/style使用示例
!-- pages/example/example.vue --
templateview classcontainerview classtitle车牌号输入示例/view!-- 基础用法 --view classsectionview classsection-title基础用法/viewLicensePlateInput v-modelplateNumber plate-type-changeonPlateTypeChange/view classresult输入的车牌号: {{ plateNumber }}/view/view!-- 指定初始车牌类型 --view classsectionview classsection-title新能源车牌/viewLicensePlateInput v-modelnewEnergyPlateinit-plate-typenewEnergy/view classresult输入的车牌号: {{ newEnergyPlate }}/view/view!-- 隐藏类型选择器 --view classsectionview classsection-title隐藏类型选择器/viewLicensePlateInput v-modelfixedPlate:show-type-selectorfalseinit-plate-typenormal/view classresult输入的车牌号: {{ fixedPlate }}/view/view!-- 操作按钮 --view classactionsu-button clickclearAll清空所有/u-buttonu-button clicksetPlate设置车牌号/u-button/view/view
/templatescript
import LicensePlateInput from /components/LicensePlateInput.vueexport default {components: {LicensePlateInput},data() {return {plateNumber: ,newEnergyPlate: ,fixedPlate: }},methods: {onPlateTypeChange(type) {console.log(车牌类型切换为:, type)},clearAll() {this.plateNumber this.newEnergyPlate this.fixedPlate },setPlate() {this.plateNumber 京A12345this.newEnergyPlate 京AD123456}}
}
/scriptstyle langscss scoped
.container {padding: 20rpx;
}.title {text-align: center;font-size: 36rpx;font-weight: bold;margin-bottom: 40rpx;
}.section {margin-bottom: 40rpx;padding: 20rpx;background-color: #f8f8f8;border-radius: 10rpx;
}.section-title {font-size: 32rpx;font-weight: bold;margin-bottom: 20rpx;
}.result {margin-top: 20rpx;padding: 20rpx;background-color: #fff;border-radius: 10rpx;
}.actions {display: flex;justify-content: space-around;margin-top: 40rpx;
}
/style组件特性
Props
initPlateType: 初始车牌类型 (‘normal’ | ‘newEnergy’)默认 ‘normal’showTypeSelector: 是否显示车牌类型选择器 (Boolean)默认 truevalue: 初始车牌号码 (String)默认 ‘’
Events
input: 车牌号码变化时触发返回完整车牌号plate-type-change: 车牌类型切换时触发返回类型值
Methods
getPlateNumber(): 获取当前车牌号码setPlateNumber(plateNumber): 设置车牌号码clearPlate(): 清空车牌号码
使用方式
将组件文件保存到 components/LicensePlateInput.vue在页面中引入并注册组件使用 v-model 进行双向绑定可通过 init-plate-type 指定初始车牌类型可通过 show-type-selector 控制是否显示类型选择器
这样就完成了一个功能完整的uniapp车牌号输入组件可以直接在项目中使用。
