feat: vue country code component

This commit is contained in:
saparatayev 2022-01-14 18:01:53 +05:00
parent 3b959d95b2
commit ab1f7314c6
7 changed files with 17562 additions and 34 deletions

15585
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -31,5 +31,7 @@
"vue-meta": "^2.4.0",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {}
"dependencies": {
"vue-country-code": "^1.1.2"
}
}

File diff suppressed because one or more lines are too long

View File

@ -907,6 +907,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
//
//
//
//
//
//
// import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
props: {
@ -936,9 +939,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
}]
}),
// errorsArr: [],
validationErrorsObj: {},
loader: false
loader: false,
countryCode: ''
};
},
computed: {
@ -969,6 +972,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
})
});
},
onSelect: function onSelect(_ref) {
var name = _ref.name,
iso2 = _ref.iso2,
dialCode = _ref.dialCode;
console.log(name, iso2, dialCode);
this.countryCode = dialCode;
},
submit: function submit() {
var _this = this;
@ -2103,6 +2113,16 @@ var render = function() {
"a-form-item",
{ attrs: { label: _vm.trans("Phone") } },
[
_c("vue-country-code", {
attrs: {
preferredCountries: ["tm"],
defaultCountry: "tm"
},
on: { onSelect: _vm.onSelect }
}),
_vm._v(" "),
_c("span", [_vm._v(_vm._s(_vm.countryCode))]),
_vm._v(" "),
_c("a-input", {
attrs: { placeholder: _vm.trans("Phone") },
model: {

View File

@ -907,6 +907,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
//
//
//
//
//
//
// import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
props: {
@ -936,9 +939,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
}]
}),
// errorsArr: [],
validationErrorsObj: {},
loader: false
loader: false,
countryCode: ''
};
},
computed: {
@ -969,6 +972,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
})
});
},
onSelect: function onSelect(_ref) {
var name = _ref.name,
iso2 = _ref.iso2,
dialCode = _ref.dialCode;
console.log(name, iso2, dialCode);
this.countryCode = dialCode;
},
submit: function submit() {
var _this = this;
@ -1988,6 +1998,16 @@ var render = function() {
"a-form-item",
{ attrs: { label: _vm.trans("Phone") } },
[
_c("vue-country-code", {
attrs: {
preferredCountries: ["tm"],
defaultCountry: "tm"
},
on: { onSelect: _vm.onSelect }
}),
_vm._v(" "),
_c("span", [_vm._v(_vm._s(_vm.countryCode))]),
_vm._v(" "),
_c("a-input", {
attrs: { placeholder: _vm.trans("Phone") },
model: {

View File

@ -25,6 +25,12 @@
<a-form-item
:label="trans('Phone')"
>
<vue-country-code
@onSelect="onSelect"
:preferredCountries="['tm']"
:defaultCountry="'tm'">
</vue-country-code>
<span>{{ countryCode }}</span>
<a-input v-model="form.phone" :placeholder="trans('Phone')" />
<template v-if="validationErrorsObj.phone">
<span class="validation-error" v-for="item in validationErrorsObj.phone" :key="item">{{ item }}</span>
@ -145,9 +151,9 @@ export default {
},
],
}),
// errorsArr: [],
validationErrorsObj: {},
loader: false
loader: false,
countryCode: '',
};
},
@ -185,6 +191,11 @@ export default {
};
},
onSelect({name, iso2, dialCode}) {
console.log(name, iso2, dialCode);
this.countryCode = dialCode
},
submit() {
// this.form.post(this.route('requests.store'), {
// onSuccess: (res) => {

View File

@ -8,12 +8,14 @@ import PortalVue from 'portal-vue';
import Antd from 'ant-design-vue';
import Layout from '@/Layouts/AppLayout'
import VueMeta from 'vue-meta'
import VueCountryCode from "vue-country-code";
Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
Vue.use(Antd);
Vue.use(VueMeta);
Vue.use(VueCountryCode);
const app = document.getElementById('app');