Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
e4565b3a
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e4565b3a
编写于
3月 24, 2021
作者:
S
suzigang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: address
上级
bc68015d
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
139 addition
and
88 deletion
+139
-88
src/packages/address/demo.vue
src/packages/address/demo.vue
+59
-25
src/packages/address/doc.md
src/packages/address/doc.md
+13
-13
src/packages/address/index.scss
src/packages/address/index.scss
+5
-9
src/packages/address/index.vue
src/packages/address/index.vue
+55
-40
src/styles/variables.scss
src/styles/variables.scss
+7
-1
未找到文件。
src/packages/address/demo.vue
浏览文件 @
e4565b3a
...
...
@@ -16,7 +16,7 @@
:town=
"town"
@
change=
"cal => onChange(cal, 'normal')"
@
close=
"close1"
custom
AddressT
itle=
"请选择所在地区"
custom
-address-t
itle=
"请选择所在地区"
></nut-address>
<h2>
选择已有地址
</h2>
...
...
@@ -30,12 +30,12 @@
<nut-address
v-model:show=
"exist"
type=
"exist"
:exist
A
ddress=
"existAddress"
:exist
-a
ddress=
"existAddress"
@
change=
"cal => onChange(cal, 'exist')"
@
close=
"close2"
:is
ShowCustomA
ddress=
"false"
:is
-show-custom-a
ddress=
"false"
@
selected=
"selected"
exist
AddressT
itle=
"配送至"
exist
-address-t
itle=
"配送至"
></nut-address>
<h2>
自定义图标
</h2>
...
...
@@ -49,14 +49,14 @@
<nut-address
v-model:show=
"customImg"
type=
"exist"
:exist
A
ddress=
"existAddress"
:exist
-a
ddress=
"existAddress"
@
change=
"cal => onChange(cal, 'customImg')"
@
close=
"close3"
:is
ShowCustomA
ddress=
"false"
:is
-show-custom-a
ddress=
"false"
@
selected=
"selected"
:default
I
con=
"defaultIcon"
:selected
I
con=
"selectedIcon"
:close
BtnI
con=
"closeBtnIcon"
:default
-i
con=
"defaultIcon"
:selected
-i
con=
"selectedIcon"
:close
-btn-i
con=
"closeBtnIcon"
></nut-address>
<h2>
自定义地址与已有地址切换
</h2>
...
...
@@ -70,18 +70,18 @@
<nut-address
v-model:show=
"other"
type=
"exist"
:exist
A
ddress=
"existAddress"
:exist
-a
ddress=
"existAddress"
:province=
"province"
:city=
"city"
:country=
"country"
:town=
"town"
:back
BtnI
con=
"backBtnIcon"
:back
-btn-i
con=
"backBtnIcon"
@
change=
"cal => onChange(cal, 'other')"
@
close=
"close4"
@
selected=
"selected"
custom
AndExistT
itle=
"选择其他地址"
@
switch
M
odule=
"switchModule"
@
close
M
ask=
"closeMask"
custom
-and-exist-t
itle=
"选择其他地址"
@
switch
-m
odule=
"switchModule"
@
close
-m
ask=
"closeMask"
></nut-address>
</div>
</
template
>
...
...
@@ -90,6 +90,36 @@
import
{
createComponent
}
from
'
@/utils/create
'
;
import
{
reactive
,
ref
,
toRefs
}
from
'
vue
'
;
const
{
createDemo
}
=
createComponent
(
'
address
'
);
interface
CalBack
{
next
:
string
;
value
:
string
;
custom
:
string
;
}
interface
RegionData
{
name
:
string
;
[
key
:
string
]:
any
;
}
interface
CalResult
{
type
:
string
;
data
:
AddressResult
;
}
interface
AddressList
{
id
?:
string
|
number
;
provinceName
:
string
;
cityName
:
string
;
countyName
:
string
;
townName
:
string
;
addressDetail
:
string
;
selectedAddress
:
boolean
;
}
interface
AddressResult
extends
AddressList
{
addressIdStr
:
string
;
addressStr
:
string
;
province
:
RegionData
[];
city
:
RegionData
[];
country
:
RegionData
[];
town
:
RegionData
[];
}
export
default
createDemo
({
props
:
{},
setup
()
{
...
...
@@ -178,13 +208,13 @@ export default createDemo({
showPopup
.
normal
=
!
showPopup
.
normal
;
};
const
onChange
=
(
cal
,
ta
g
)
=>
{
const
name
=
address
[
cal
.
next
];
const
onChange
=
(
cal
:
CalBack
,
tag
:
strin
g
)
=>
{
const
name
=
(
address
as
any
)
[
cal
.
next
];
if
(
name
.
length
<
1
)
{
showPopup
[
tag
]
=
false
;
(
showPopup
as
any
)
[
tag
]
=
false
;
}
};
const
close1
=
val
=>
{
const
close1
=
(
val
:
CalResult
)
=>
{
console
.
log
(
val
);
text
.
one
=
val
.
data
.
addressStr
;
};
...
...
@@ -193,7 +223,7 @@ export default createDemo({
showPopup
.
exist
=
true
;
};
const
close2
=
val
=>
{
const
close2
=
(
val
:
CalResult
)
=>
{
console
.
log
(
val
);
if
(
val
.
type
==
'
exist
'
)
{
const
{
...
...
@@ -209,7 +239,11 @@ export default createDemo({
text
.
two
=
val
.
data
.
addressStr
;
}
};
const
selected
=
(
prevExistAdd
,
nowExistAdd
,
arr
)
=>
{
const
selected
=
(
prevExistAdd
:
AddressList
,
nowExistAdd
:
RegionData
,
arr
:
AddressList
[]
)
=>
{
console
.
log
(
prevExistAdd
);
console
.
log
(
nowExistAdd
);
};
...
...
@@ -221,7 +255,7 @@ export default createDemo({
showPopup
.
customImg
=
true
;
};
const
close3
=
val
=>
{
const
close3
=
(
val
:
CalResult
)
=>
{
console
.
log
(
val
);
if
(
val
.
type
==
'
exist
'
)
{
const
{
...
...
@@ -238,7 +272,7 @@ export default createDemo({
}
};
const
close4
=
val
=>
{
const
close4
=
(
val
:
CalResult
)
=>
{
console
.
log
(
val
);
if
(
val
.
type
==
'
exist
'
)
{
const
{
...
...
@@ -255,15 +289,15 @@ export default createDemo({
}
};
const
switchModule
=
cal
=>
{
if
(
c
al
.
type
==
'
custom
'
)
{
const
switchModule
=
(
val
:
CalResult
)
=>
{
if
(
v
al
.
type
==
'
custom
'
)
{
console
.
log
(
'
点击了“选择其他地址”按钮
'
);
}
else
{
console
.
log
(
'
点击了自定义地址左上角的返回按钮
'
);
}
};
const
closeMask
=
val
=>
{
const
closeMask
=
(
val
:
CalResult
)
=>
{
console
.
log
(
'
关闭弹层
'
,
val
);
};
...
...
src/packages/address/doc.md
浏览文件 @
e4565b3a
...
...
@@ -361,20 +361,20 @@ setup() {
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| v-model:show | 是否打开地址选择 | String | ''
| type | 地址选择类型 exist/custom | String |
custom
| type | 地址选择类型 exist/custom | String |
'custom'
| province | 省,每个省的对象中,必须有 name 字段 | Array | []
| city | 市,每个市的对象中,必须有 name 字段 | Array | []
| country | 县,每个县的对象中,必须有 name 字段 | Array | []
| town | 乡/镇,每个乡/镇的对象中,必须有 name 字段 | Array | []
| exist
A
ddress | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | Array | []
| default
I
con | 已有地址列表默认图标,type=‘exist’ 时生效 | string | ''
| selected
I
con | 已有地址列表选中图标,type=‘exist’ 时生效 | string | ''
| close
BtnI
con | 自定义关闭弹框按钮图标 | string | -
| back
BtnI
con | 自定义地址与已有地址切换时,自定义返回的按钮图标 | string | -
| is
ShowCustomA
ddress | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | Boolean | true
| custom
AddressT
itle | 自定义地址选择文案,type='custom' 时生效 | string | '请选择所在地区'
| exist
AddressT
itle| 已有地址文案 ,type=‘exist’ 时生效| string | '配送至'
| custom
AndExistT
itle| 自定义地址与已有地址切换按钮文案 ,type=‘exist’ 时生效| string | '选择其他地址'
| exist
-a
ddress | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | Array | []
| default
-i
con | 已有地址列表默认图标,type=‘exist’ 时生效 | string | ''
| selected
-i
con | 已有地址列表选中图标,type=‘exist’ 时生效 | string | ''
| close
-btn-i
con | 自定义关闭弹框按钮图标 | string | -
| back
-btn-i
con | 自定义地址与已有地址切换时,自定义返回的按钮图标 | string | -
| is
-show-custom-a
ddress | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | Boolean | true
| custom
-address-t
itle | 自定义地址选择文案,type='custom' 时生效 | string | '请选择所在地区'
| exist
-address-t
itle| 已有地址文案 ,type=‘exist’ 时生效| string | '配送至'
| custom
-and-exist-t
itle| 自定义地址与已有地址切换按钮文案 ,type=‘exist’ 时生效| string | '选择其他地址'
*
provinceName 省的名字
...
...
@@ -387,11 +387,11 @@ setup() {
## Event
| 字段 | 说明 | 回调参数
|----- | ----- | -----
| on
C
hange | 自定义选择地址时,选择地区时触发 | 参考 onChange
| on
-c
hange | 自定义选择地址时,选择地区时触发 | 参考 onChange
| selected | 选择已有地址列表时触发 | 参考 selected
| close | 地址选择弹框关闭时触发 | 参考 close
| close
Mask |
点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'}
| switch
M
odule | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'}
| close
-mask |
点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'}
| switch
-m
odule | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'}
## onChange 回调参数
...
...
src/packages/address/index.scss
浏览文件 @
e4565b3a
...
...
@@ -50,11 +50,7 @@
margin-top
:
5px
;
width
:
26px
;
height
:
3px
;
background
:
linear-gradient
(
90deg
,
$primary-color
0%
,
$primary-color-end
100%
);
background
:
$address-region-tab-line
;
}
}
...
...
@@ -69,7 +65,7 @@
display
:
flex
;
align-items
:
center
;
margin-bottom
:
20px
;
font-size
:
12px
;
font-size
:
$font-size-1
;
color
:
#333
;
&
.active
{
font-weight
:
bold
;
...
...
@@ -97,9 +93,9 @@
display
:
flex
;
align-items
:
center
;
margin-bottom
:
20px
;
font-size
:
12px
;
font-size
:
$font-size-1
;
line-height
:
14px
;
color
:
rgba
(
51
,
51
,
51
,
1
)
;
color
:
#333
;
&
.active
{
font-weight
:
bold
;
}
...
...
@@ -128,7 +124,7 @@
background
:
$button-primary-background-color
;
border-radius
:
21px
;
font-size
:
15px
;
color
:
rgba
(
255
,
255
,
255
,
1
)
;
color
:
$white
;
}
}
}
...
...
src/packages/address/index.vue
浏览文件 @
e4565b3a
...
...
@@ -12,8 +12,9 @@
class=
"arrow-back"
@
click=
"switchModule"
v-if=
"showModule == 'custom' && type == 'exist' && backBtnIcon"
><nut-icon
:name=
"backBtnIcon"
color=
"#CCCCCC"
></nut-icon
></view-block>
>
<nut-icon
:name=
"backBtnIcon"
color=
"#CCCCCC"
></nut-icon>
</view-block>
<view-block
class=
"arrow-back"
v-else
></view-block>
<view-block
v-if=
"showModule == 'custom'"
>
{{
...
...
@@ -23,14 +24,14 @@
existAddressTitle
}}
</view-block>
<view-block
class=
"arrow-close"
@
click=
"handClose('cross')"
>
<nut-icon
<view-block
class=
"arrow-close"
@
click=
"handClose('cross')"
>
<nut-icon
v-if=
"closeBtnIcon"
:name=
"closeBtnIcon"
color=
"#CCCCCC"
size=
"18px"
></nut-icon
>
</view-block>
></nut-icon
>
</view-block>
</view-block>
<!-- 请选择 -->
...
...
@@ -43,8 +44,9 @@
:key=
"index"
:ref=
"key"
@
click=
"changeRegionTab(item, key, index)"
><view>
{{
getTabName
(
item
,
index
)
}}
</view></view-block
>
<view>
{{
getTabName
(
item
,
index
)
}}
</view>
</view-block>
<view-block
class=
"region-tab-line"
ref=
"regionLine"
></view-block>
</view-block>
...
...
@@ -120,6 +122,27 @@ import { reactive, ref, toRefs, watch, nextTick } from 'vue';
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
componentName
,
create
}
=
createComponent
(
'
address
'
);
import
{
TweenMax
}
from
'
gsap
'
;
interface
RegionData
{
name
:
string
;
[
key
:
string
]:
any
;
}
interface
Region
{
province
:
RegionData
[];
city
:
RegionData
[];
country
:
RegionData
[];
town
:
RegionData
[];
[
key
:
string
]:
any
;
}
interface
AddressList
{
id
?:
string
|
number
;
provinceName
:
string
;
cityName
:
string
;
countyName
:
string
;
townName
:
string
;
addressDetail
:
string
;
selectedAddress
:
boolean
;
}
export
default
create
({
props
:
{
show
:
{
...
...
@@ -197,13 +220,7 @@ export default create({
],
setup
(
props
,
{
emit
})
{
console
.
log
(
'
componentName
'
,
componentName
);
const
regionLine
=
ref
<
null
|
HTMLElement
>
(
null
);
// const tabItemprovince = ref
<
null
|
HTMLElement
>
(
null
);
// const tabItemcity = ref
<
null
|
HTMLElement
>
(
null
);
// const tabItemcountry = ref
<
null
|
HTMLElement
>
(
null
);
// const tabItemtown = ref
<
null
|
HTMLElement
>
(
null
);
const
tabItemRef
=
reactive
({
province
:
ref
<
null
|
HTMLElement
>
(
null
),
...
...
@@ -225,10 +242,10 @@ export default create({
});
const
selectedRegion
=
reactive
({
province
:
{},
city
:
{},
country
:
{},
town
:
{}
province
:
{}
as
RegionData
,
city
:
{}
as
RegionData
,
country
:
{}
as
RegionData
,
town
:
{}
as
RegionData
});
//已选择的 省、市、县、镇
let
selectedExistAddress
=
reactive
({});
// 当前选择的地址
...
...
@@ -236,7 +253,7 @@ export default create({
const
closeWay
=
ref
(
'
self
'
);
//获取已选地区列表名称
const
getTabName
=
(
item
,
index
)
=>
{
const
getTabName
=
(
item
:
RegionData
,
index
:
number
)
=>
{
if
(
item
.
name
)
return
item
.
name
;
if
(
tabIndex
.
value
<
index
)
{
...
...
@@ -259,7 +276,7 @@ export default create({
};
// 移动下面的红线
const
lineAnimation
=
()
=>
{
const
name
=
tabItemRef
[
tabName
.
value
[
tabIndex
.
value
]];
const
name
=
(
tabItemRef
as
any
)
[
tabName
.
value
[
tabIndex
.
value
]];
nextTick
(()
=>
{
if
(
name
)
{
const
distance
=
name
.
offsetLeft
;
...
...
@@ -268,7 +285,7 @@ export default create({
});
};
// 切换下一级列表
const
nextAreaList
=
item
=>
{
const
nextAreaList
=
(
item
:
RegionData
|
string
)
=>
{
// onchange 接收的参数
const
calBack
=
{
next
:
''
,
...
...
@@ -276,10 +293,10 @@ export default create({
custom
:
tabName
.
value
[
tabIndex
.
value
]
};
selectedRegion
[
tabName
.
value
[
tabIndex
.
value
]]
=
item
;
(
selectedRegion
as
any
)
[
tabName
.
value
[
tabIndex
.
value
]]
=
item
;
for
(
let
i
=
tabIndex
.
value
;
i
<
tabIndex
.
value
-
1
;
i
++
)
{
selectedRegion
[
tabName
.
value
[
i
+
1
]]
=
{};
(
selectedRegion
as
any
)
[
tabName
.
value
[
i
+
1
]]
=
{};
}
if
(
tabIndex
.
value
<
3
)
{
...
...
@@ -289,28 +306,28 @@ export default create({
// 切换下一个
calBack
.
next
=
tabName
.
value
[
tabIndex
.
value
];
calBack
.
value
=
item
;
calBack
.
value
=
item
as
string
;
emit
(
'
change
'
,
calBack
);
}
else
{
handClose
();
}
};
//切换地区Tab
const
changeRegionTab
=
(
item
,
key
,
index
)
=>
{
const
changeRegionTab
=
(
item
:
RegionData
,
key
:
number
,
index
:
number
)
=>
{
tabIndex
.
value
=
index
;
lineAnimation
();
};
// 选择现有地址
const
selectedExist
=
item
=>
{
const
copyExistAdd
=
props
.
existAddress
as
[];
const
selectedExist
=
(
item
:
RegionData
)
=>
{
const
copyExistAdd
=
props
.
existAddress
as
AddressList
[];
let
prevExistAdd
=
{};
copyExistAdd
.
forEach
((
list
,
index
)
=>
{
if
(
list
&&
(
list
as
any
).
selectedAddress
)
{
if
(
list
&&
(
list
as
AddressList
).
selectedAddress
)
{
prevExistAdd
=
list
;
}
(
list
as
any
).
selectedAddress
=
false
;
(
list
as
AddressList
).
selectedAddress
=
false
;
});
item
.
selectedAddress
=
true
;
...
...
@@ -324,7 +341,7 @@ export default create({
// 初始化
const
initAddress
=
()
=>
{
for
(
let
i
=
0
;
i
<
tabName
.
value
.
length
;
i
++
)
{
selectedRegion
[
tabName
.
value
[
i
]]
=
{};
(
selectedRegion
as
any
)
[
tabName
.
value
[
i
]]
=
{};
}
tabIndex
.
value
=
0
;
lineAnimation
();
...
...
@@ -332,8 +349,6 @@ export default create({
// 关闭
const
close
=
()
=>
{
console
.
log
(
'
关闭
'
);
const
resCopy
=
Object
.
assign
(
{
addressIdStr
:
''
,
...
...
@@ -351,16 +366,16 @@ export default create({
const
{
province
,
city
,
country
,
town
}
=
resCopy
;
resCopy
.
addressIdStr
=
[
(
province
as
any
).
id
||
0
,
(
city
as
any
).
id
||
0
,
(
country
as
any
).
id
||
0
,
(
town
as
any
).
id
||
0
(
province
as
RegionData
).
id
||
0
,
(
city
as
RegionData
).
id
||
0
,
(
country
as
RegionData
).
id
||
0
,
(
town
as
RegionData
).
id
||
0
].
join
(
'
_
'
);
resCopy
.
addressStr
=
[
(
province
as
any
).
name
,
(
city
as
any
).
name
,
(
country
as
any
).
name
,
(
town
as
any
).
name
(
province
as
RegionData
).
name
,
(
city
as
RegionData
).
name
,
(
country
as
RegionData
).
name
,
(
town
as
RegionData
).
name
].
join
(
''
);
res
.
data
=
resCopy
;
}
else
{
...
...
@@ -437,7 +452,7 @@ export default create({
value
=>
{
// existAddress.value = value;
value
.
forEach
((
item
,
index
)
=>
{
if
((
item
as
any
).
selectedAddress
)
{
if
((
item
as
AddressList
).
selectedAddress
)
{
selectedExistAddress
=
item
as
{};
}
});
...
...
src/styles/variables.scss
浏览文件 @
e4565b3a
...
...
@@ -226,7 +226,6 @@ $tabbar-active-color: $primary-color;
$tabbar-border-color
:
#eee
;
//infiniteloading
$infinite-bottom-color
:
#c8c8c8
;
//range
...
...
@@ -238,6 +237,13 @@ $rang-bar-bg-color: linear-gradient(
$primary-color-end
100%
);
//address
$address-region-tab-line
:
linear-gradient
(
90deg
,
$primary-color
0%
,
$primary-color-end
100%
);
view-block
{
display
:
block
;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录