Как добавить код страны поиска при вводе vue tel? - PullRequest
Новая
       73

Как добавить код страны поиска при вводе vue tel?

0 голосов
/ 10 ноября 2019

Мой компонент vue: 

      <v-container>
        <v-row>        
          <v-col cols="12" sm="6" md="3">
            <vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input>
          </v-col>
        </v-row>
      </v-container>
      <v-btn
        color="success"
        @click="submit"
      >
        submit
      </v-btn>

Мой кодовый блок: https://codepen.io/positivethinking639/pen/XWWBXMW?editors=1011

Я хочу отобразить поиск следующим образом:

enter image description here

Так что пользователям будет проще выбирать код страны

Как я могу это сделать?

1 Ответ

0 голосов
/ 11 ноября 2019

Я думаю, что самое простое - иметь два раскрывающихся списка рядом друг с другом, поэтому он выглядит так же, как тот, который вы опубликовали. Когда пользователь нажимает «Сохранить», имейте v-модель с кодом страны и v-модель с присоединенным номером. 

data () => ({
     countryCode: '+81',
     number: '555-5555'
}),
methods: {
     submitForm () {
          const phone = countryCode + number //or however you want to concatenate
          //do other stuff here
     }
}

Другие ваши варианты - склеить и добавить код страны в строкувпереди номер телефона при изменении, но это кажется немного излишним для чего-то с простым решением.

Если я не понимаю ваш вопрос, пожалуйста, добавьте немного больше деталей.

Еслиесли вы хотите, чтобы цифры отображались, вам придется внести изменения в используемые вами параметры библиотеки. Кажется, вы используете пакет vue-tel-input, верно?

Вы можете установить + код для показа с этим: 

inputOptions: {
          showDialCode: true
        }

Проверьте все опции здесь: https://www.npmjs.com/package/vue-tel-input

...