VUE JS 3＆＃x2B; vue-phone-number输入

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

想要改进此问题吗？添加详细信息并通过

闭合 2年前。

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')