Mand Mobile文档实践分享
发布时间
阅读量：
阅读量
1、使用NumberKeyboard的时候如何根据某个条件，切换数字键盘和手机自带键盘的展示？
答：可以利用属性 :is-virtual-keyboard 属性动态控制是否显示数字键盘，为true的时候显示数字键盘，false显示手机自带键盘。
<md-input-item
title="证件号码"
align="right"
placeholder="请输入证件号码"
v-model="idNo"
maxlength="18"
:is-virtual-keyboard="isVirtualKeyboard"
:virtual-keyboard-vm="$refs.IdNoKeyBoard"
@focus="showKeyboard"
@blur="showKeyboard"
></md-input-item>
<md-number-keyboard
ref="IdNoKeyBoard"
v-model="isKeyBoardShow"
:text-render="keyFormatter"
@enter="onNumberEnter"
@delete="onNumberDelete"
><md-number-keyboard>
html
（1）在md-input-item属性中：
title用于显示输入框的提示语
align用于显示输入框居右输入
is-virtual-keyboard 属性动态控制是否显示数字键盘
virtual-keyboard-vm属性指定键盘对应的ref名称
（2）在md-number-keyboard属性中：
v-model用于控制键盘显示或隐藏，是true或者false
text-render用于改变键盘原本小数点键输入区域输入的值
如果不需要小数点可以加上hide-dot隐藏小数点输入位置，如：
<md-number-keyboard
hide-dot
ref="IdNoKeyBoard"
v-model="isKeyBoardShow"
:text-render="keyFormatter"
@enter="onNumberEnter"
@delete="onNumberDelete"
><md-number-keyboard>
html定义的变量有：idNo，isVirtualKeyboard、isKeyBoardShow
定义的方法：
showKeyboard () {
if(this.idType === '某一类型') { //如果是某一类型就展示数字键盘
this.isKeyBoardShow = !this.isKeyBoardShow;
}else{ //如果不是某一类型就显示手机键盘，不显示数字键盘
this.isVirtualKeyboard = !this.isVirtualKeyboard
}
},
keyFormatter (val) { //键盘小数点位置显示为X
if (val === '.') {
return 'X'
}
},
onNumberEnter (val) { //输入数字
if (this.idNo.length === 18) { //限制输入18位
return;
}
this.idNo += val; //输入一个就在后面加一个字符
},
onNumberDelete () { //删除数字
if(this.idNo === '') { //如果还没有进行输入，就不需要删除
return;
}
this.idNo = String(this.idNo).substr(0, String(this.idNo).length - 1);
}
javascript
2、Mand-mobile中picker的用法
<!--点击显示picker的item-->
<md-field-item
title="证件类型"
:addon="selectorText"
@click="isSelectorShow = true"
:arrow="true"
></md-field-item>
<md-picker
ref="IdTypePicker"
v-model="isSelectorShow"
:data="IdTypeList"
title="证件类型"
@confirm="onPickerComfirm()"
></md-picker>
html
注意：如果要显示右侧箭头要用动态参数的方式
这里用到的变量有：
selectorText: '身份证', //默认选项的文本
isSelectorShow: false, //是否展示选项面板
IdTypeList:[
[
{ label: '身份证', value: '00' },
{ label: '国外护照', value: '05' },
{ label: '户口本', value: '07' },
{ label: '军官证', value: '01' },
{ label: '士兵证', value: '17' },
{ label: '文职干部证', value: '02' },
{ label: '港澳居民来往内地通行证', value: '06' },
{ label: '台湾同胞来往内地通行证', value: '13' },
{ label: '警官证', value: '03' },
{ label: '中国护照', value: '24' },
{ label: '其他证件', value: '99' },
{ label: '外国人永久居留身份证', value: '09' },
{ label: '港澳居民居住证', value: '32' },
{ label: '台湾居民居住证', value: '33' }
]
]
javascript
注意：这里的数据必须使用双中括号包裹，遵守文档写法，否则会显示不出来。
这里使用到的方法有：
onPickerComfirm() {
const values = this.$refs.IdTypePicker.getColumnValues() //获取当前选中的值
console.log(values)
let [context] = [...values] //因为拿到的值在一个数组里面，必须使用解构赋值取出来
this.selectorText = context.label //把获取到的值展示到item上
this.idType = context.value //同时把对应值修改
}
javascript
经过实践验证，该方法比文档简洁好用。
文档原来的写法是这样的：
onPickerConfirm(index) {
const values = this.$refs[`picker${index}`].getColumnValues()
let res = ''
values.forEach(value => {
value && (res += `${value.text || value.label} `)
})
this[`pickerValue${index}`] = res
},
javascript
本质上第一行和我写的是一个作用，只不过这里是用数组的方式去获取对象的值，但这个写法更灵活，可以给大家提供一个思路，具体是否需要参考看大家的个人情况。
至于下面的循环我个人觉得没必要了，为了取一个值去加一个循环总觉得有点浪费，所以这里用解构赋值代替了。
最后一行就是根据你需要绑定的item，去修改这个值，达到同步修改的效果。
全部评论 (0)
还没有任何评论哟~