Table of contents

Browser Support

Demo

Getting started

npm install vue-weblineindia-url#ORyarn add vue-weblineindia-url

Usage

<template>  <div>     <URLid="facebookUrl"name="facebookUrl"social-type="FACEBOOK":tabindex="1":placeholder="'Facebook Url'":value="urlValue":hide="false":disabled="false"@focus="onFocus"@onBlur="onBlur"@onChange="onChangeUrl":validation-regx="facebookUrlRegex"    />    <pv-show="invalidFacebookUrlError":class="{        control: true,        'error-msg': invalidFacebookUrlError      }"    >      <span>The url entered is not valid and must be changed</span>    </p>  </div></template><script>importURLfrom"vue-weblineindia-url";exportdefault {  components: {URL },data:function() {return {      urlValue:"",      invalidFacebookUrlError:false,      facebookUrlRegex:/(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?/    };  },  methods: {/** on focus url field*/onFocus(event) {event.target.placeholder="";    },/** on blur url field*/onBlur(event,placeholder,errorObj) {event.target.placeholder= placeholder;constid=event.target.id;this.showUrlErrorMsg(id, errorObj);    },/**     * To show invalid url error msg*/showUrlErrorMsg(id,errorObject) {if (errorObject.items.length>0) {errorObject.items.map(err=> {consturlId=err.field;switch (urlId) {case"facebookUrl":this.invalidFacebookUrlError=true;break;          }        });      }    },/** on change value on url**/onChangeUrl(value,id,index,error) {this.invalidFacebookUrlError=false;this.urlValue= value;    }  }};</script>

Available Props

Methods

Want to Contribute?

Need Help?

Collection of Components

Changelog

License

Keywords