如何将vue tel输入与输入文本vuetify结合？

Question

我的代码如下：

<v-row>        
    <v-col cols="12" sm="6" md="3">
    <v-text-field
        label="Phone"
        outlined 
        dense
    ></v-text-field>
    </v-col>
    <v-col cols="12" sm="6" md="3">
    <vue-tel-input v-model="phone"></vue-tel-input>
    </v-col>
</v-row>

我的codepen是这样的：https://codepen.io/positivethinking639/pen/qBBKYON?&editable=true&editors=101

我想将其组合成这样：

蓝色符号来自vue tel输入。旁边的文本字段来自vuetify组件

如何将2种不同的成分组合成一个像上图所示的图像？

Answer 1

是的，可以在下拉菜单旁边设置国家/地区代码

以下是有效的代码笔：https://codepen.io/chansv/pen/pooZJey?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>        
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              label="Phone"
              outlined 
              dense
            ></v-text-field>
          </v-col>
          <v-col cols="12" sm="6" md="3">
            <vue-tel-input v-model="phone" @country-changed="countrySelected">
              <template v-slot:arrow-icon>
                <v-icon>arrow_drop_down</v-icon>
                <strong>+{{countryCode}}</strong>
               </template>
            </vue-tel-input>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
    data() {
      return {
        phone: null,
       countryCode: null,
      }
    },
    methods: {
  countrySelected(val) {
    this.countryCode = val.dialCode;
  }
}
})