vue-dist-picker
1.1.0 • Public • Published vue-dist-picker
vue组件:中国省市区三联选择(pc端)
更新日志
@1.0.0
demo
示例(vue@1.0+) 点我.
截图
依赖
基于 vue.js@1.0+ 版本,模块使用es6编写(需babel转译),css使用scss编译(需scss-loader转译)。
地区列表数据源
china-dist-data.
当然你可以使用自己的数据,格式与此相符即可,该组件最终需要的是一个名为“DIST_PICKER_LIST”的全局变量。
安装
npm
$ npm install vue-dist-picker china-dist-data
使用
参考示例,地区列表需要按指定的格式,并声明全局变量。
相关参数
名称 |
类型 |
默认 |
说明 |
value |
String |
"" |
要双向绑定的地区Id |
field |
String |
"" |
会给input标签添加name及id属性 |
placeholder |
String |
"" |
你懂的 |
示例(vue@1.0+)
<div id="app">
<label for="dist">收货地址</label>
<dist-picker field="dist" placeholder="选择您的收货地址" :value.sync="distId"></dist-picker>
</div>
<script>
import 'babel-polyfill';
import distList from 'china-dist-data';
import Vue from 'vue';
import myDistPicker from 'vue-dist-picker';
window.DIST_PICKER_LIST = distList;
new Vue({
el: '#app',
data: {
distId: ''
},
components: {
'dist-picker': myDistPicker
}
});
</script>
Package Sidebar
Install
Weekly Downloads