第一次提交
This commit is contained in:
@fawn-nine
2
uni_modules/z-address/changelog.md
Normal file
2
uni_modules/z-address/changelog.md
Normal file
@@ -0,0 +1,2 @@
|
||||
## 1.0.0（2021-05-12）
|
||||
1. 支持uni_modules
|
||||
175
uni_modules/z-address/components/z-address/z-address.vue
Normal file
175
uni_modules/z-address/components/z-address/z-address.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="addres_select_val">
|
||||
<view>
|
||||
<view v-for="(item, index) of addressVal" :key="index" :class="{ select: addressIndex == index }" @click="selectType(index)" k>{{ item.name }}</view>
|
||||
<view
|
||||
:class="{ select: selectState == addressIndex }"
|
||||
v-show="selectState < length || (selectState >= length && selectState < 3 && !force)"
|
||||
@click="selectType(selectState)"
|
||||
>
|
||||
请选择
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="addres_box" scroll-y :scroll-top="scrollTop">
|
||||
<view>
|
||||
<view
|
||||
v-for="(item, index) of addressList"
|
||||
:key="index"
|
||||
:class="{ select: addressVal.length > addressIndex && item.objId == addressVal[addressIndex].objId }"
|
||||
@click="selectClick(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
//选中数据
|
||||
dataList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
//联动长度[省，市，区]
|
||||
length: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 3;
|
||||
}
|
||||
},
|
||||
//是否强制选择,如果length=2,force = false 选择到市的时候就可以确定了，但是还可以选择到区
|
||||
force: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.dataList instanceof Array) {
|
||||
this.addressVal = this.dataList;
|
||||
this.selectState = this.dataList.length;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataList(val) {
|
||||
this.addressVal = val;
|
||||
this.selectState = val.length;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//选出的值
|
||||
addressVal: [],
|
||||
//当前选择
|
||||
addressIndex: 0,
|
||||
//选择的值
|
||||
addressList: [],
|
||||
//请选择的显示
|
||||
selectState: 0,
|
||||
scrollTop:0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getRegion(pid) {
|
||||
//请求数据
|
||||
this.$http.get('api/common/v1/region', { pid: pid }, { load: false }).then(data => {
|
||||
if (data.length > 0) {
|
||||
this.addressList = data;
|
||||
this.scrollTop = 0;
|
||||
} else {
|
||||
this.$emit('change', this.addressVal);
|
||||
}
|
||||
});
|
||||
},
|
||||
//切换对应的类型
|
||||
selectType(index) {
|
||||
this.addressIndex = index;
|
||||
var len = this.addressVal.length;
|
||||
if (index == 0) {
|
||||
this.getRegion(0);
|
||||
} else {
|
||||
this.getRegion(this.addressVal[index - 1].objId);
|
||||
}
|
||||
if (len == this.length) {
|
||||
this.selectState = this.length;
|
||||
} else if (len == this.length && index == this.length && this.force) {
|
||||
this.selectState = index;
|
||||
} else {
|
||||
this.selectState = index + 1;
|
||||
}
|
||||
},
|
||||
//选择
|
||||
selectClick(item) {
|
||||
if (this.addressIndex == 0) {
|
||||
this.addressVal = [];
|
||||
} else {
|
||||
this.addressVal.splice(this.addressIndex, this.addressVal.length - 1);
|
||||
}
|
||||
this.addressVal.push(item);
|
||||
if (this.addressVal.length < this.length || (this.addressVal.length < 3 && !this.force)) {
|
||||
this.getRegion(item.objId);
|
||||
this.addressIndex++;
|
||||
}
|
||||
if (this.addressVal.length >= this.length || !this.force) {
|
||||
this.$emit('change', this.addressVal);
|
||||
}
|
||||
this.selectState = this.addressVal.length;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getRegion(0);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/mixin.scss";
|
||||
.addres_select_val {
|
||||
padding: 0upx 10upx;
|
||||
border-bottom: 1upx solid #ebebeb;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.addres_select_val > view {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.addres_select_val > view > view {
|
||||
margin-left: 20upx;
|
||||
padding: 0upx 10upx;
|
||||
height: 72upx;
|
||||
line-height: 72upx;
|
||||
border-bottom: 2upx solid #fff;
|
||||
box-sizing: border-box;
|
||||
font-size: 28upx;
|
||||
}
|
||||
.addres_select_val > view > view:first-child {
|
||||
margin-left: 0upx;
|
||||
}
|
||||
.addres_select_val > view > view.select {
|
||||
border-bottom: 2upx solid $themeColor;
|
||||
color: $themeColor;
|
||||
}
|
||||
.addres_box {
|
||||
padding: 0upx 20upx;
|
||||
height: 420upx;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
.addres_box view > view {
|
||||
height: 72upx;
|
||||
line-height: 72upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
.addres_box view > view.select {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
78
uni_modules/z-address/package.json
Normal file
78
uni_modules/z-address/package.json
Normal file
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"id": "z-address",
|
||||
"displayName": "三级联动，地址选择，可选长度",
|
||||
"version": "1.0.0",
|
||||
"description": "三级联动，地址选择，可选长度",
|
||||
"keywords": [
|
||||
"三级联动",
|
||||
"地址选择",
|
||||
"地区选择"
|
||||
],
|
||||
"repository": "https://github.com/zhouwei1994/uni-app-demo",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.0.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "465081029"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
uni_modules/z-address/readme.md
Normal file
27
uni_modules/z-address/readme.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# 三级联动，地址选择，可选长度
|
||||
|
||||
三级联动，地址选择，可选长度
|
||||
|
||||
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
|
||||
| ----------------------------|--------------------------- |
|
||||
|||
|
||||
| QQ群号：607391225 |微信号：zhou0612wei|
|
||||
|
||||
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
|
||||
|
||||
### 案例一
|
||||
```
|
||||
<z-address :dataList="[]" @change="addressChange" :length="3" :force="force"></z-address>
|
||||
```
|
||||
|
||||
### 属性
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
|
||||
| dataList | Array | [] | 默认值|
|
||||
| length | Number | 3 | 地区选择长度（1-3） |
|
||||
| force | Boolean | true | 强制选择，选择长度必须达到指定长度|
|
||||
|
||||
### 事件
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -----------------|------------------ | --------------------------|
|
||||
| @change | function | 选择时数据返回 |
|
||||
Reference in New Issue
Block a user