Could I use in Element UI?

[thearabbit]

<el-input v-mask="'99/99/9999'" v-model="inputMask"></el-input>

But don't work

[bapa92]

https://github.com/vuejs-tips/vue-the-mask I recommend. Works perfectly with the examples below. <el-input v-model="value" placeholder="12-1234" v-mask="'##-####'"/>

[matsuev]

Try this solution. Works for me

npm install inputmask --save

Then add to main.js

import Inputmask from 'inputmask'

Vue.directive('mask', {
    bind: function (el, binding) {
        Inputmask(binding.value).mask(el.getElementsByTagName('INPUT')[0])
    }
})

Use with <el-input>

<el-input
    v-model="phone.number"
    v-mask="'+7 (999) 999-9999'"
    placeholder="+7 (___) ___-____"
></el-input>

Inputmask usage https://github.com/RobinHerbots/Inputmask#usage

[thearabbit]

Thanks for all, I would like to use mask with Currency/Money

[thearabbit]

@matsuev, could example with currency formate, and unmask when get value?

[thearabbit]

Now it work for unmask

import Inputmask from 'inputmask'
Vue.directive('inputmask', {
  bind: function(el, binding) {
    var inputs = el.getElementsByTagName('INPUT')
    var input = inputs[0]
    if (inputs.length > 1) {
      input = inputs[inputs.length - 1]
    }
    // new Inputmask(binding.value).mask(input)
    new Inputmask({
      autoUnmask: true,
    }).mask(input)
  },
})

Ex:

<el-input
      v-model="input"
      v-inputmask
      data-inputmask="'mask': '+7 (999) 999-9999'"
      placeholder="+7 (___) ___-____"
    />
    {{ inputJqMask }}

But now I am trying with currency

[thearabbit]

but data-inputmask don't support object style

:data-inputmask="{mask: '+7 (999) 999-9999'}"

[2bj]

I tried a lot of things with directives, but they were all with bugs (because el-input is wrapped around input). In the end, I decided to do it through computed values:

yarn add vue-imask

const maskField = (field, maskOptions) => {
    const mask = createMask(maskOptions)

    return {
        get() {
            return mask.resolve(this.form[field])
        },
        set(value) {
            this.form[field] = mask.resolve(value)
        }
    }
}

export default {
    data() {
        return {
            form: {phone: ''},
        }
    },
    computed: {
        phoneMasked: maskField('phone', {
            mask: '+{7} (000) 000-00-00'
        })
    }
}

p.s. https://github.com/scleriot/vue-inputmask/issues/6#issuecomment-389458116 Fine solution, but not work on mobile devices

[ghost]

Cause vue-inputmask doesnt work for el-input, I leaved as input and wrapped with <div class="el-input"> Example:

<el-form-item label="Date">
                            <div class="el-input">
                                <input v-model="formModel.date"
                                    name="date"                                   
                                    class="el-input__inner"
                                    validateevent="true"
                                    v-mask="{
                                        'mask': '99/99/9999'                                            
                                    }"/>                            
                            </div>                            
                        </el-form-item>

Also added validateevent="true"

[siberiadev]

Try this solution. Works for me

npm install inputmask --save

Then add to main.js

import Inputmask from 'inputmask'

Vue.directive('mask', {
    bind: function (el, binding) {
        Inputmask(binding.value).mask(el.getElementsByTagName('INPUT')[0])
    }
})

Use with

<el-input
    v-model="phone.number"
    v-mask="'+7 (999) 999-9999'"
    placeholder="+7 (___) ___-____"
></el-input>

Inputmask usage https://github.com/RobinHerbots/Inputmask#usage

I get this error when use your code: TypeError: Cannot read property 'nodeType' of null

[Maksio]

I've found one more solution:

<el-input v-model="inputMask"></el-input>
<input type="hidden" v-model="inputMask" v-mask="'99/99/9999'">