Add dynamicPlaceholder prop to set placeholder as a sample number from the current country

Author: iamstevendao

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) {