77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
# lotus-address
|
|
|
|
> 省市区三级联动选择组件 适用H5/APP/微信小程序
|
|
|
|
> 注意事项：重要事情说三遍 重要事情说三遍 重要事情说三遍！！！！当前组件一定要放在最外层节点，不然会点击了，组件不生效，千万记住了。
|
|
|
|
## how to use
|
|
|
|
### 组件引入使用
|
|
|
|
1.xx.vue
|
|
|
|
```sh
|
|
import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
|
|
```
|
|
|
|
2.页面使用
|
|
|
|
```sh
|
|
<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
|
|
```
|
|
|
|
3.参数说明
|
|
(1)参数定义:
|
|
|
|
```sh
|
|
data () {
|
|
return {
|
|
lotusAddressData:{
|
|
visible:false,
|
|
provinceName:'',
|
|
cityName:'',
|
|
townName:'',
|
|
},
|
|
region:''
|
|
}
|
|
}
|
|
```
|
|
|
|
4.方法定义与调用：
|
|
|
|
```sh
|
|
components:{
|
|
"lotus-address":lotusAddress
|
|
},
|
|
methods: {
|
|
//打开picker
|
|
openPicker() {
|
|
this.lotusAddressData.visible = true;
|
|
this.lotusAddressData.provinceName = '广东省';
|
|
this.lotusAddressData.cityName = '广州市';
|
|
this.lotusAddressData.townName = '白云区';
|
|
},
|
|
//回传已选的省市区的值
|
|
choseValue(res){
|
|
//res数据源包括已选省市区与省市区code
|
|
console.log(res);
|
|
this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
|
|
//res.isChose = 1省市区已选 res.isChose = 0;未选
|
|
if(res.isChose){
|
|
this.lotusAddressData.provinceName = res.province;//省
|
|
this.lotusAddressData.cityName = res.city;//市
|
|
this.lotusAddressData.townName = res.town;//区
|
|
this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
项目展示：
|
|
|
|
|
|
|
|
开源不易 可以请我喝杯冰的吗？^_^
|
|
|
|
|