基于ElementUI 国际化电话组件el-phone-number-input用法

最新推荐文章于 2024-09-25 15:32:00 发布

yuanyuan_HTML

最新推荐文章于 2024-09-25 15:32:00 发布

阅读量3.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yuanyuan_HTML/article/details/106565044

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.首先安装vue 国际化电话组件

npm install el-phone-number-input;

2.当前页面引入组件

import { ElPhoneNumberInput, mobileValidator, phoneNumberValidator} from 'el-phone-number-input'

3.下面是具体使用代码：callingCode是国家区号，phoneNumber是手机号

import { ElPhoneNumberInput, mobileValidator, phoneNumberValidator} from 'el-phone-number-input'

export default {
    components: {
	      ElPhoneNumberInput
	},
	data(){
	    return{
           phone: {
              callingCode: '',
              phoneNumber: ''
           },
        }
    }
}

/* 使用方法 表单 */
<el-form-item label="Phone" prop="phone">
        <el-phone-number-input v-model="phone"   ></el-phone-number-input>
</el-form-item>