如何安装
npm install v-distpicker --save
或者
yarn add v-distpicker --save
注册全局组件
import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)
注册局部组件
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker }
}
基本使用
<template>
<v-distpicker></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
}
</script>
占位符
<template>
<v-distpicker :placeholders="placeholders"></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
data() {
return {
placeholders: {
province: '------- 省 --------',
city: '--- 市 ---',
area: '--- 区 ---',
}
}
}
}
</script>
原始值
<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: '广东省', city: '广州市', area: '海珠区' },
}
},
}
</script>
隐藏区
<template>
<v-distpicker hide-area></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
}
</script>
只有省
<template>
<v-distpicker only-province></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
}
</script>
事件触发
<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>
