1.0.0 • Published 2 years ago
vue3-widget-mondial-relay v1.0.0
Vue Widget Mondial Relay
Mondial Relay Widget https://widget.mondialrelay.com/parcelshop-picker/v4_0/codesamples/Sample-LightImplementation.aspx to Vue
Installation
Using npm
npm i --save vue3-widget-mondial-relay
Requirements
Vue 3
vue 2? use the old library -> https://github.com/EduardoMateos/vue-widget-mondial-relay
Props API
Props | Type | Required | Default | Details |
---|---|---|---|---|
brand | String | true | Provider by Mondial Relay | |
defaultPostCode | String | false | 59000 | Default postal Code used for search at loading |
defaultCountry | String | false | FR | FR, ES, BE, NL, LU, DE, AT |
maxResults | Int | false | 7 | Must be less than 20 |
deliveryMode | String | false | 24R | Standard 24R, XL 24L, XXL 24X, Drive DRI |
allowedCountries | Array | false | * | FR, ES, BE, NL, LU, DE, AT |
translations | Object | false | texts in spanish | details in documentation |
Translations
Prop: translations
Object example:
:translations="{
headerTitle: 'Select your mondial relay ®',
findCpText: 'CP',
findCityText: 'City',
cityNoResults: 'no results',
btnListMobile: 'List',
btnMapMobile: 'Map'
}"
Example
<template>
<div id="app" style="max-width: 980px; margin: auto">
<vue-3-widget-mondial-relay
brand="BDTEST "
defaultPostCode="59000"
defaultCountry="FR"
maxResults="7"
deliveryMode="24R"
@select="setParcelSelected($event)"
:translations="{
headerTitle: 'Select your mondial relay ®',
findCpText: 'CP',
findCityText: 'City',
cityNoResults: 'no results',
btnListMobile: 'List',
btnMapMobile: 'Map'
}"
/>
</div>
</template>
import Vue3WidgetMondialRelay from 'vue3-widget-mondial-relay';
import 'vue-widget-mondial-relay/dist/widget-mondial-relay.min.css';
export default {
name: 'App',
components: {
Vue3WidgetMondialRelay
},
methods:{
setParcelSelected(data){
console.log(data)
}
}
}
1.0.0
2 years ago