vuetify ip输入

vue电话输入vuetify (vue-tel-input-vuetify)

International Telephone Input with Vuetify.

Vuetify的国际电话输入。

安装 (Installation)

示例存储库 (Example Repository)

You might want to follow and use the basic example usage of this library in this repository Example

你可能想要关注和使用这个库的基本用法示例在这个仓库例

OR try from scratch with below steps

或者按照以下步骤从头开始尝试

Vue-Cli (vue-cli)

• create new vue project using vue-cli:

  使用vue-cli创建新的vue项目：

vue create my-appcd my-app

证明 (vuetify)

• install vuetify to newly created vue project

  将vuetify安装到新创建的vue项目

vue add vuetify

npm (npm)

• install vue-tel-input-vuetify to newly created vue project

  将vue-tel-input-vuetify安装到新创建的vue项目

npm install vue-tel-input-vuetify

Install the plugin into Vue:

将插件安装到Vue中：

With vuetify loader:

使用vuetify loader：

// src/plugins/vuetify.jsimport Vue from 'vue';import Vuetify from 'vuetify/lib';Vue.use(Vuetify);export default new Vuetify({});

// src/VueComponent.jsimport VueTelInputVuetify from "vue-tel-input-vuetify/lib/vue-tel-input-vuetify.vue"<template><vue-tel-input-vuetify></vue-tel-input-vuetify>
</template>export default {components: {VueTelInputVuetify,},
};

// src/main.jsimport Vue from 'vue';
import vuetify from "@/plugins/vuetify";new Vue({vuetify,render: (h) => h(App),
}).$mount("#app");

Without vuetify loader:

没有vuetify加载程序：

// src/plugins/vuetify.jsimport Vue from 'vue';import Vuetify from 'vuetify';import 'vuetify/dist/vuetify.min.css'Vue.use(Vuetify);export default new Vuetify({});

// src/main.jsimport Vue from 'vue';
import VueTelInputVuetify from "vue-tel-input-vuetify";
import vuetify from "./plugins/vuetify";Vue.use(VueTelInputVuetify, {vuetify,
});new Vue({vuetify,render: (h) => h(App),
}).$mount("#app");

View all available options in Props.

在“ 道具”中查看所有可用选项。

Use the vue-tel-input-vuetify component:

使用vue-tel-input-vuetify组件：

<template><vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
<template><script>
export default {data() {return {phone: null}}
};
</script>

用法 (Usage)

道具 (Props)

大事记 (Events)

翻译自: https://vuejsexamples.com/international-telephone-input-with-vuetify/

vuetify ip输入