Vue.js 3 带国家代码输入的电话字段

Question

有人知道插入电话字段的方法，该字段带有类似于 vue3 link 中的国家代码下拉列表吗？ https://www.npmjs.com/package/vue-tel-input

我曾尝试使用 link 中的包，但它在控制台中抛出以下错误。

Uncaught (in promise) TypeError: selfHook.bind is not a function

尝试实施：

main.js

import { createApp } from 'vue'
import VueTelInput from 'vue-tel-input'

const app = createApp(App);
app.use(VueTelInput)
app.mount('#app');

在 App.vue 中，我只是使用以下代码像组件一样导入它：

<vue-tel-input></vue-tel-input>

Answer 1

有人在 open issue regarding Vue3 support for the library that they have created a Vue3 version of it: https://github.com/victorybiz/vue3-tel-input

上发帖

我试过了，好像还不错！

Answer 2

这个库现在支持 Vue 3。 https://iamstevendao.github.io/vue-tel-input/documentation/next.html

npm install vue-tel-input@next

import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';

const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');

...

<template>
  <vue-tel-input v-model="phone"></vue-tel-input>
></template>

Vue.js 3 带国家代码输入的电话字段

Vue.js 3 telepone field with country code input

vue.js

vuejs3