Add dynamicPlaceholder prop to set placeholder as a sample number f…

…rom the current country

README.md

@@ -115,7 +115,8 @@ Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.i
  | `dropdownOptions` | `Object` | `{ disabledDialCode: false, tabindex: 0 }` | Options for dropdown, supporting `disabledDialCode` and `tabindex`| 
  | `inputOptions` | `Object` | `{ showDialCode: false, tabindex: 0 }` | Options for input, supporting `showDialCode` (always show dial code in the input) and `tabindex`|
  | `validCharactersOnly` | `Boolean` | `false` | Only allow valid characters in a phone number (will also verify in `mounted`, so phone number with invalid characters will be shown as an empty string) |
- | `mode` | `String` | `''` | Format number to `'International'` (with + dial code) or `'National'` (with 0...) |
+ | `mode` | `String` | `''` | Format number to `'International'` (with + dial code) or `'National'` (with 0...), available from [v3.1.0](https://github.com/EducationLink/vue-tel-input/releases/tag/v3.1.0) |
+ | `dynamicPlaceholder` | `Boolean` | `false` | Placeholder as a sample phone number in the current country, available from [v3.1.0](https://github.com/EducationLink/vue-tel-input/releases/tag/v3.1.0) |
 
 ### Events
 
@@ -128,7 +129,7 @@ Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.i
  | `enter` | | Fires on keyup.enter event | `onEnter` deprecated |
  | `open` | | Fires when the flags dropdown opens | |
  | `close` | | Fires when the flags dropdown closes | |
- | `country-changed` | `Object` | Fires when country changed (even for the first time) | Available from `v2.4.2` |
+ | `country-changed` | `Object` | Fires when country changed (even for the first time) | Available from [v2.4.2](https://github.com/EducationLink/vue-tel-input/releases/tag/v2.4.2) |
 
 ### Slots
  | Slot | Description | Notes |

src/components/vue-tel-input.vue

@@ -36,7 +36,7 @@
  <input
  ref="input"
  v-model="phone"
- :placeholder="placeholder"
+ :placeholder="parsedPlaceholder"
  :disabled="disabled"
  :required="required"
  :autocomplete="autocomplete"
@@ -284,18 +284,33 @@ export default {
  type: Boolean,
  default: false,
  },
+ dynamicPlaceholder: {
+ type: Boolean,
+ default: false,
+ },
  },
  data() {
  return {
  phone: '',
  activeCountry: { iso2: '' },
  open: false,
+ finishMounted: false,
  selectedIndex: null,
  typeToFindInput: '',
  typeToFindTimer: null,
  };
  },
  computed: {
+ parsedPlaceholder() {
+ if (!this.finishMounted) {
+ return '';
+ }
+ if (this.dynamicPlaceholder) {
+ const mode = this.mode || 'international';
+ return PhoneNumber.getExample(this.activeCountry.iso2, 'mobile').getNumber(mode);
+ }
+ return this.placeholder;
+ },
  parsedMode() {
  if (this.mode) {
  if (!['international', 'national'].includes(this.mode)) {
@@ -379,16 +394,21 @@ export default {
  },
  },
  mounted() {
- this.initializeCountry().then(() => {
- if (!this.phone
+ this.initializeCountry()
+ .then(() => {
+ if (!this.phone
  && this.inputOptions
  && this.inputOptions.showDialCode
- && this.activeCountry) {
- this.phone = `+${this.activeCountry.dialCode}`;
- }
- this.$emit('validate', this.phoneObject);
- this.$emit('onValidate', this.phoneObject); // Deprecated
- }).catch(console.error); // eslint-disable-line
+ && this.activeCountry.dialCode) {
+ this.phone = `+${this.activeCountry.dialCode}`;
+ }
+ this.$emit('validate', this.phoneObject);
+ this.$emit('onValidate', this.phoneObject); // Deprecated
+ })
+ .catch(console.error)
+ .finally(() => {
+ this.finishMounted = true;
+ });
  },
  created() {
  if (this.value) {