meta-phone
Input component type boolean based on a checkbox to be used within forms. It contains all required validations.
Installation
Via NPM:
$ npm install --save meta-input-phone
You also have to inject a validator instance into your Vue application:
src/main.js
import VeeValidate, { Validator } from 'vee-validate' # Optional language package import ptBR from 'vee-validate/dist/locale/pt_BR' Validator.addLocale(ptBR) # Optional Vue.use(VeeValidate, { inject: false, locale: 'pt_BR', fieldsBagName: 'validationFields', })
Usage
Just import it and use it as a directive:
<template>
<div id="app">
<meta-phone id="id" name="name" label="Phone Number" v-model="phone"></meta-phone>
</div>
</template>
<script>
import MetaPhone from 'meta-phone'
export default {
name: 'App',
components: {
MetaPhone,
},
data() {
return {
phone: '',
};
}
}
</script>
Props
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
classes | object |
false | {} |
|
disabled | boolean |
false | false | |
id | string |
true | ||
label | string |
true | ||
maxlength | number |
false | 255 | |
minlength | number |
false | 0 | |
name | string |
true | ||
pattern | string |
false | (.*) |
Regex to be applied |
placeholder | string |
false | ||
readonly | boolean |
false | false | |
required | boolean |
false | false | |
validations | object |
false | {} |
Validations applied by vee-validate |
Build Setup
# install dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev
# build for production with minification
$ npm run build
For detailed explanation on how things work, consult the docs for vue-loader.