feat: vue country code component
This commit is contained in:
parent
3b959d95b2
commit
ab1f7314c6
File diff suppressed because it is too large
Load Diff
|
|
@ -31,5 +31,7 @@
|
|||
"vue-meta": "^2.4.0",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
},
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"vue-country-code": "^1.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1942
public/js/app.js
1942
public/js/app.js
File diff suppressed because one or more lines are too long
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue