VUE3+Ant Design Vue+TS实现手机号输入组件（带区号） |
您所在的位置：网站首页 › 电话号前加区号 › VUE3+Ant Design Vue+TS实现手机号输入组件（带区号） |
VUE3+Ant Design Vue+TS实现手机号输入组件（带区号）
|
技术栈：Vue3+TypeScript+Ant Design Vue
因实际业务需求，频繁需要使用手机号输入，包含区号的选择。 简介此组件为区号、手机号输入组件，开放出常用配置项与onChange事件。可单独使用，也可以结合表单使用。 Vue布局 {{ label }} TS逻辑 主要逻辑文件 import { defineComponent, ref } from 'vue'; import { phoneCode } from '@/config/configData'; import { isUndefined } from '@/utils/common'; import type { ObjectT } from '@/config/interface'; export default defineComponent({ name: 'AreaPhone', components: {}, props: { // 区号字段 code: { type: Number, default: 86, }, // 禁用区号选择 isDisabledCode: { type: Boolean, default: false, }, // 手机号字段 phone: { type: String, }, // 禁用手机号输入 isDisabledPhone: { type: Boolean, default: false, }, // 组件尺寸 size: { type: String, }, // 输入提示 placeholder: { type: String, }, // 允许清空手机号输入框 allowClear: { type: Boolean, }, }, emits: ['onChange'], setup(props, context) { // 区号 const currCode = ref(`+${props.code}`); // 手机号 const currPhone = ref(props.phone); /** 区号或手机号修改时触发 */ const onChange = () => { context.emit('onChange', { code: Number(currCode.value.split('+')[1]), phone: currPhone.value, }); }; /** 处理成需要的数据结构 */ const countryCode = phoneCode.map((item: ObjectT) => { return { value: item.dialCode, label: `+${item.dialCode} ${item.name}`, selectedLabel: `+${item.dialCode}`, }; }); /** 表单重置 */ const resetPhone = () => { currCode.value = `+${props.code}`; currPhone.value = props.phone; }; return { currCode, currPhone, countryCode, onChange, isUndefined, resetPhone, }; }, }); 配置文件 区号可选项configData.ts中区号可选项的内容非常多，此处只写几个用于示例 export const phoneCode = [ { code: 'af', name: 'Afghanistan (افغانستان)', dialCode: 93, phoneFormat: '070 123 4567', CNName: '阿富汗', }, { code: 'al', name: 'Albania (Shqipëri)', dialCode: 355, phoneFormat: '066 123 4567', CNName: '阿尔巴尼亚', }, { code: 'cn', name: 'China (中国)', dialCode: 86, phoneFormat: '131 2345 6789', CNName: '中国', }, ] 公共方法common.ts中 isUndefined // 是否未定义 export const isUndefined = (val: any) => { return typeof val === 'undefined'; }; 类型检测 export interface ObjectT { [propName: string]: any // 额外类型检查 } scss样式 .areaCodeDropdown { width: 410px !important; } .areaCodePhoneInput { width: calc(100% - 89px); } 组件应用 import CodePhone from '@/components/CodePhone.vue'; import { ref } from 'vue'; const code = ref(86); const phone = ref('2131'); const onChangePhone = (data: { code: number; phone: string}) => { console.log('code and phone',data.code, data.phone) } 效果
|
【本文地址】
今日新闻 |
推荐新闻 |