国际电话组件封装使用以及vuephonenumberinput属性解读
phone-number-input
组件描述：国际电话输入组件。
适用场景：电话号码输入框。
特点：
- 包含各个国家的区号；
- 输入一串号码，可给出是否是正确号码的校验结果；
- 灵活性、可变性强；可满足绝大多数场景下的业务需要。
props
| props | type | default | explain |
|---|---|---|---|
| value | String | ‘’ | 组件绑定的值，默认为空 |
| error | Boolean | false | 值为true时展示校验失败的外观 |
| no-example | Boolean | false | 是否展示输入示例 |
| disabled | Boolean | false | 是否禁用 |
| clearable | Boolean | false | 是否可清空 |
| show-code-on-list | Boolean | false | 是否在国家选择器内展示国家区号 |
| no-flags | Boolean | false | 是否在国家选择器内展示国家的国旗 |
| border-radius | Number | 0 | 边框圆角大小 |
| color | String | dodgerblue | 默认外观 |
| valid-color | String | yellowgreen | 校验通过的边框颜色 |
| translations | Object | { | 自定义文案 |
| countrySelectorLabel: ‘国家’, | 有4个属性可配置不同地方的显示文案; | ||
| countrySelectorError: ‘请选择国家’, | 详见左侧单元格内 | ||
| phoneNumberLabel: ‘号码’, | |||
| example: ‘示例 :’ | |||
| } | |||
| no-country-selector | Boolean | false | 是否不展示国家选择框，默认展示 |
| preferred-countries | Array | [] | 将国家选择框中指定countryCode的国家前置，如中国：[‘CN’] |
event
| event | return | explain |
|---|---|---|
| update | allValue | 组件值更改时触发；返回参数：国际电话组件的全部数据，包括组件绑定的值、各种号码格式以及校验结果等； |
| input | value | 组件值更改时触发；返回参数：国际电话组件绑定的值 |
| PhoneNumberBlur | 无 | 输入框失去焦点时触发 |
usage
- 引用
import PhoneNumberInput from 'fe-coms/components/business/phone-number-input'
- 注册
components: {PhoneNumberInput}
- 使用
<template><PhoneNumberInput value="yourValue" /></template>
源码
以下代码对VuePhoneNumberInput的大部分属性做了封装，满足绝大多数使用场景；
<template><div><VuePhoneNumberInputv-model="value"@update="update"@input="input"@phone-number-blur="PhoneNumberBlur":error="error":valid-color="ValidColor":color="color":no-country-selector="NoCountrySelector":preferred-countries="PreferredCountries":disabled="disabled":clearable="clearable":show-code-on-list="showCodeOnList":no-flags="NoFlags":border-radius="BorderRadius":no-example='NoExample':translations="translations"></VuePhoneNumberInput></div>
</template><script>
import VuePhoneNumberInput from 'vue-phone-number-input'
import 'vue-phone-number-input/dist/vue-phone-number-input.css'
export default {name: 'PhoneNumberInput',components: {VuePhoneNumberInput},data () {return {}},props: {value: { //组件绑定的值type: String,default: ''},error: { //校验失败type: Boolean,default: false},disabled: { //禁用type: Boolean,default: false},clearable: { //是否可清空type: Boolean,default: false},ValidColor: { //验证通过的颜色type: String,default: 'yellowgreen'},color: { //默认外观type: String,default: 'dodgerblue'},translations: { //自定义文案type: Object,default: {countrySelectorLabel: '国家',countrySelectorError: '请选择国家',phoneNumberLabel: '号码',example: '示例 :'}},NoCountrySelector: { //是否不使用国家选择器，默认使用type: Boolean,default: false},PreferredCountries: { //默认展示在前面的国家，数组格式，值是国家代码的集合,如中国“CN”type: Array,default: []},BorderRadius: { type: Number,default: 0},ShowCodeOnList: { //是否在国家选择器内展示国际号type: Boolean,default: false},NoFlags: { //是否在国家选择器内展示国家的国旗type: Boolean,default: false},NoExample: { //是否展示输入示例type: Boolean,default: false}},methods: {input (value) {console.log(value)this.$emit('input', value)},update (allValue) {this.$emit('update', allValue)},PhoneNumberBlur () {this.$emit('PhoneNumberBlur')}}
}
</script><style lang="scss" scoped>/deep/ .country-selector__label,/deep/ .input-tel__label {line-height: 1;}
</style>关于VuePhoneNumberInput
官方地址：https://github.com/LouisMazel/vue-phone-number-input
国际电话组件封装使用以及vuephonenumberinput属性解读相关推荐
- Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查 前言 一.Questionnaire 组件 二.使用案例 三.API 使用指南 四.源代码 前言 问卷调查表也是目前前端比较常见的开发项目,目 ...
- Vue 组件封装之 List 列表
Vue 组件封装之 List 列表 一.List 列表 二.使用案例 三.API 使用指南 四.源代码 一.List 列表 组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
- vuetify ip输入_Vuetify国际电话输入
vuetify ip输入 vue电话输入vuetify (vue-tel-input-vuetify) International Telephone Input with Vuetify. Vuet ...
- ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...
- Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装 修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
- php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来 一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
- layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
- Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
- React Native－6.React Native Text组件，多组件封装实战之凤凰资讯页面
现来个图:没图说个xx 先来分析怎么做 一个导航栏 一个列表 一个摘要列表 大体可以分为上中下三个模块,那么我们从上到下一次封装. 我们来搞出些事情 创建.js文件,一个组件一个.js文件 我们通过命 ...
最新文章
- 【黑客浅析】像黑客一样思考
- 用chattr保护文件系统的安全
- PAT Basic 1032
- 特征工程（3）：特征选择—信息增益
- AI理论知识整理（13）-标准基
- mysqldatareader获取整行数据给datarow_SqlDataReader的用法（读取1整行）
- 数据库中删除语句Drop、Delete、Truncate的相同点和不同点的比较（举例说明）
- python中的ans是什么意思_python ans
- 属于HTML文档头部相关标记,下列选项中，属于HTML文档头部相关标记的是 答案：title/titlemeta /...
- google 插件_google这4款插件我每天都用，省时无数
- android的内存泄露有几种,Android中几种有可能会导致内存泄露的情况
- jsp为什么被淘汰了？
- 超分 Super-Resolution
- 【翻译】Flux安全审计已经结束
- opencv3之SVD
- APP运营推广不简单 这些数据指标一定要看！
- java实现截取视频方法
- 基因调控分析之转录因子结合位点分析
- Mac下从安装Git到使用github进行版本控制(git命令/Xcode管理)
- 怎么样很快的速度锁定计算机,怎样让电脑速度变快