Vue js 3 + vue-phone-数字输入

Question

我尝试安装这个依赖项，但每次我都告诉它它不存在并且 vue 3 无法重新爱它组件。

https://www.npmjs.com/package/vue-phone-number-input

谢谢你帮助我 enter image description here

Answer 1

尝试以下方法

打开 App.vue 文件并添加以下内容：

<template>
<div id="app">
<div class="container">
  <VuePhoneNumberInput
    id="phoneNumber1"
    v-model="phoneNumber"
    color="dodgerblue"
    :dark="dark"
    :disabled="disabled"
    :ignored-countries="countriesIgnored"
    :preferred-countries="countriesList"
    :loader="hasLoaderActive"
    clearable
    :error="hasErrorActive"
    class="mb-2"
    @update="onUpdate"
  />
  <b>v-model</b> : {{ phoneNumber }}
</div>
</div>
</template>
<script>
import VuePhoneNumberInput from "vue-phone-number-input";
export default {
name: "App",
components: {
  VuePhoneNumberInput,
},
data() {
  return {
    phoneNumber: null,
    defaultCountry: "FR",
    countriesList: ["FR", "BE", "DE"],
    countriesIgnored: ["AF", "AD", "AL"],
    dark: false,
    disabled: false,
    hasLoaderActive: false,
    hasErrorActive: false,
   };
 },
methods: {
 onUpdate(payload) {
   this.results = payload;
 },
},
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
 }
</style>

然后，打开 main.js 文件并添加以下内容：

import Vue from 'vue'
import App from './App.vue'
import 'vue-phone-number-input/dist/vue-phone-number-input.css';
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')

希望这有效！

Vue js 3 + vue-phone-数字输入

Vue js 3 + vue-phone-number-input

javascript

frontend

node.js

npm

vue.js