Skip to content

Instantly share code, notes, and snippets.

@CdTgr

CdTgr/index.html

Created November 1, 2022 16:43
Show Gist options
  • Save CdTgr/a85f5548f08db62861091c7f85566026 to your computer and use it in GitHub Desktop.
Save CdTgr/a85f5548f08db62861091c7f85566026 to your computer and use it in GitHub Desktop.
Download ZIP
vue3-q-tel-input
Raw
index.html
<div id="q-tel-app">
<div class="q-pa-md row items-start q-gutter-md">
<div class="display-flex">
<h6 class="q-ma-none q-mb-sm">Default input</h6>
<q-card class="q-mb-md">
<q-card-section class="q-pa-sm">
<label>Telephont Number:</label>
<vue3-q-tel-input v-model:tel="defaultTelephone" />
</q-card-section>
</q-card>
<h6 class="q-ma-none q-mb-sm">1. <code>default-coutry</code></h6>
<small>This will change the default country to the corresponding one that is used, eg: de</small>
<q-card class="q-mb-md">
<q-card-section class="q-pa-sm">
<label>Telephont Number:</label>
<vue3-q-tel-input v-model:tel="telWithCountry" default-country="de" />
</q-card-section>
</q-card>
<h6 class="q-ma-none q-mb-sm">2. <code>eager-validate</code></h6>
<small>This will avoid validations on the inital load</small>
<q-card class="q-mb-md">
<q-card-section class="q-pa-sm">
<label>Telephont Number:</label>
<vue3-q-tel-input v-model:tel="telWithCountry" :eager-validate="false" />
</q-card-section>
</q-card>
<h6 class="q-ma-none q-mb-sm">2. <code>search-text</code></h6>
<small>This will change the search text on the country selection dropdown</small>
<q-card class="q-mb-md">
<q-card-section class="q-pa-sm">
<label>Telephont Number:</label>
<vue3-q-tel-input v-model:tel="telWithCountry" search-text="Choose a country" />
</q-card-section>
</q-card>
</div>
</div>
</div>
Raw
script.typescript
const { ref } = Vue;
const { useQuasar } = Quasar;
const app = Vue.createApp({
setup() {
return {
defaultTelephone: ref(""),
telWithCountry: ref("")
};
}
});
app.use(Vue3QTelInput);
app.use(Quasar, { config: {} });
app.mount("#q-tel-app");
Raw
scripts
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-q-tel-input@latest/dist/vue3-q-tel-input.min.js"></script>
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vue3-q-tel-input@latest/dist/vue3-q-tel-input.esm.css" rel="stylesheet" />
Raw
vue3-q-tel-input.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment