How to install
npm install v-distpicker --save
Copy the codeor
yarn add v-distpicker --save
Copy the codeRegistering global components
import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)
Copy the codeRegister local components
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker }
}
Copy the codeThe basic use
<template>
<v-distpicker></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
}
</script>
Copy the code
A placeholder
<template>
<v-distpicker :placeholders="placeholders"></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
data() {
return {
placeholders: {
province: '-- -- -- -- -- -- -- province -- -- -- -- -- -- -- --'.
city: 'city -- -- -.
area: '- area -.
}
}
}
}
</script>
Copy the code
The original value
<template>
<v-distpicker :province="select.province" :city="select.city" :area="select.area"></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
data() {
return {
select: { province: 'Guangdong'.city: 'Guangzhou'.area: 'Pearl Zone' },
}
},
}
</script>
Copy the code
Hidden area
<template>
<v-distpicker hide-area></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
}
</script>
Copy the code
Only the province
<template>
<v-distpicker only-province></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
}
</script>
Copy the codeEvents trigger
<template>
<v-distpicker @selected="onSelected"></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
methods: {
onSelected(data) {
alert(data.province + '|' + data.city + '|' + data.area)
console.log(data)
},
}
}
</script>
Copy the code
