Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    vue-tel-input with Quasar

    Help
    2
    3
    25
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Coude last edited by

      Hi,

      I am planning to use vue-tel-input ( here ) in my quasar app (made using vue-cli). Do anyone has some experience with it?
      More precisely, I would like to know if we may manage to get the quasar/material look using this component (if I wrap it inside a QField, would it be enough?). If you have some advices, I would be glad to hear it ;).

      1 Reply Last reply Reply Quote 0
      • J
        jo06 last edited by

        Hello,

        I’m interested by this topic too.

        Regards.

        1 Reply Last reply Reply Quote 0
        • C
          Coude last edited by

          Hi,

          This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

          <template>
            <q-field
              label="Your phone number"
              stack-label
              :error="isError">
              <vue-tel-input
                :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
                input-classes="input-vue-tel-input-in-qfield"
                @input="handleInput"
              >
              </vue-tel-input>
            </q-field>
          </template>
          
          <style>
          /* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
          .input-vue-tel-input-in-qfield {
            height:98%;
            margin-bottom: auto;
          }
          
          /* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
          .wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
            color: var(--q-color-dark);
          }
          </style>
          
          <script>
          import { VueTelInput } from 'vue-tel-input';
          
          export default {
            name: 'InputPhone',
            props: {
              //
            },
            components: {
              VueTelInput,
            },
            data() {
              return {
                isError: false,
              }
            },
            methods: {
              handleInput (val, objVal) {
                console.log(val, objVal);
                this.isError = !objVal.isValid;
              }
            },
          }
          </script>
          
          1 Reply Last reply Reply Quote 1
          • First post
            Last post