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>

（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>

定义的变量有：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);
}
    

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>

注意：如果要显示右侧箭头要用动态参数的方式

这里用到的变量有：

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' }
    ]
]

注意：这里的数据必须使用双中括号包裹，遵守文档写法，否则会显示不出来。

这里使用到的方法有：

onPickerComfirm() {
    const values = this.$refs.IdTypePicker.getColumnValues()    //获取当前选中的值
    console.log(values)
    
    let [context] = [...values]    //因为拿到的值在一个数组里面，必须使用解构赋值取出来
    this.selectorText = context.label    //把获取到的值展示到item上
    this.idType = context.value    //同时把对应值修改
}

经过实践验证，该方法比文档简洁好用。

文档原来的写法是这样的：

onPickerConfirm(index) {
    const values = this.$refs[`picker${index}`].getColumnValues()

    let res = ''
    values.forEach(value => {
        value && (res += `${value.text || value.label} `)
    })
    this[`pickerValue${index}`] = res
},

本质上第一行和我写的是一个作用，只不过这里是用数组的方式去获取对象的值，但这个写法更灵活，可以给大家提供一个思路，具体是否需要参考看大家的个人情况。

至于下面的循环我个人觉得没必要了，为了取一个值去加一个循环总觉得有点浪费，所以这里用解构赋值代替了。

最后一行就是根据你需要绑定的item，去修改这个值，达到同步修改的效果。