Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yangkaifeng
uni-app
提交
0bd72540
U
uni-app
项目概览
yangkaifeng
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0bd72540
编写于
2月 17, 2022
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
wip(nvue-component): picker
上级
54fb8dc9
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
333 addition
and
0 deletion
+333
-0
packages/uni-components/src/nvue/picker/index.tsx
packages/uni-components/src/nvue/picker/index.tsx
+333
-0
未找到文件。
packages/uni-components/src/nvue/picker/index.tsx
0 → 100644
浏览文件 @
0bd72540
import
{
Ref
,
ref
,
watch
,
onBeforeUnmount
,
ExtractPropTypes
,
inject
,
defineComponent
,
}
from
'
vue
'
import
{
useCustomEvent
,
EmitEvent
}
from
'
../../helpers/useNVueEvent
'
import
{
useI18n
,
initI18nPickerMsgsOnce
}
from
'
@dcloudio/uni-core
'
// import { UniFormCtx, uniFormKey } from '../form'
import
{
showPage
,
Page
}
from
'
@dcloudio/uni-core
'
type
Mode
=
'
selector
'
|
'
multiSelector
'
|
'
time
'
|
'
date
'
type
Field
=
'
year
'
|
'
month
'
|
'
day
'
const
mode
:
Record
<
string
,
Mode
>
=
{
SELECTOR
:
'
selector
'
,
MULTISELECTOR
:
'
multiSelector
'
,
TIME
:
'
time
'
,
DATE
:
'
date
'
,
// 暂不支持城市选择
// REGION: 'region'
}
const
fields
:
Record
<
string
,
Field
>
=
{
YEAR
:
'
year
'
,
MONTH
:
'
month
'
,
DAY
:
'
day
'
,
}
function
padLeft
(
num
:
number
)
{
return
num
>
9
?
num
:
`0
${
num
}
`
}
function
getDate
(
str
:
Props
[
'
value
'
],
_mode
:
Mode
)
{
str
=
String
(
str
||
''
)
const
date
=
new
Date
()
if
(
_mode
===
mode
.
TIME
)
{
const
strs
=
str
.
split
(
'
:
'
)
if
(
strs
.
length
===
2
)
{
date
.
setHours
(
parseInt
(
strs
[
0
]),
parseInt
(
strs
[
1
]))
}
}
else
{
const
strs
=
str
.
split
(
'
-
'
)
if
(
strs
.
length
===
3
)
{
date
.
setFullYear
(
parseInt
(
strs
[
0
]),
parseInt
(
String
(
parseFloat
(
strs
[
1
])
-
1
)),
parseInt
(
strs
[
2
])
)
}
}
return
date
}
function
getDefaultStartValue
(
props
:
any
)
{
if
((
props
as
Props
).
mode
===
mode
.
TIME
)
{
return
'
00:00
'
}
if
((
props
as
Props
).
mode
===
mode
.
DATE
)
{
const
year
=
new
Date
().
getFullYear
()
-
100
switch
((
props
as
Props
).
fields
)
{
case
fields
.
YEAR
:
return
year
case
fields
.
MONTH
:
return
year
+
'
-01
'
default
:
return
year
+
'
-01-01
'
}
}
return
''
}
function
getDefaultEndValue
(
props
:
any
)
{
if
((
props
as
Props
).
mode
===
mode
.
TIME
)
{
return
'
23:59
'
}
if
((
props
as
Props
).
mode
===
mode
.
DATE
)
{
const
year
=
new
Date
().
getFullYear
()
+
100
switch
((
props
as
Props
).
fields
)
{
case
fields
.
YEAR
:
return
year
case
fields
.
MONTH
:
return
year
+
'
-12
'
default
:
return
year
+
'
-12-31
'
}
}
return
''
}
const
props
=
{
name
:
{
type
:
String
,
default
:
''
,
},
range
:
{
type
:
Array
,
default
()
{
return
[]
},
},
rangeKey
:
{
type
:
String
,
default
:
''
,
},
value
:
{
type
:
[
Number
,
String
,
Array
],
default
:
0
,
},
mode
:
{
type
:
String
,
default
:
mode
.
SELECTOR
,
validator
(
val
:
string
)
{
return
Object
.
values
(
mode
).
indexOf
(
val
as
Mode
)
>=
0
},
},
fields
:
{
type
:
String
,
default
:
''
,
},
start
:
{
type
:
String
,
default
:
getDefaultStartValue
,
},
end
:
{
type
:
String
,
default
:
getDefaultEndValue
,
},
disabled
:
{
type
:
[
Boolean
,
String
],
default
:
false
,
},
}
type
Props
=
ExtractPropTypes
<
typeof
props
>
export
default
/*#__PURE__*/
defineComponent
({
name
:
'
Picker
'
,
props
,
emits
:
[
'
change
'
,
'
cancel
'
,
'
columnchange
'
],
setup
(
props
,
{
slots
,
emit
})
{
initI18nPickerMsgsOnce
()
const
{
t
,
getLocale
}
=
useI18n
()
const
rootRef
:
Ref
<
HTMLElement
|
null
>
=
ref
(
null
)
const
trigger
=
useCustomEvent
<
EmitEvent
<
typeof
emit
>>
(
rootRef
,
emit
)
const
valueSync
:
Ref
<
Array
<
number
>
|
number
|
string
|
null
>
=
ref
(
null
)
const
page
:
Ref
<
Page
|
null
>
=
ref
(
null
)
type
ShowPickerData
=
Props
&
{
value
:
typeof
valueSync
.
value
locale
:
ReturnType
<
typeof
getLocale
>
messages
:
{
done
:
string
cancel
:
string
}
}
const
_setValueSync
=
()
=>
{
let
val
=
props
.
value
switch
(
props
.
mode
)
{
case
mode
.
MULTISELECTOR
:
{
if
(
!
Array
.
isArray
(
val
))
{
val
=
[]
}
if
(
!
Array
.
isArray
(
valueSync
.
value
))
{
valueSync
.
value
=
[]
}
const
length
=
(
valueSync
.
value
.
length
=
Math
.
max
(
val
.
length
,
props
.
range
.
length
))
for
(
let
index
=
0
;
index
<
length
;
index
++
)
{
const
val0
=
Number
(
val
[
index
])
const
val1
=
Number
(
valueSync
.
value
[
index
])
const
val2
=
isNaN
(
val0
)
?
(
isNaN
(
val1
)
?
0
:
val1
)
:
val0
valueSync
.
value
.
splice
(
index
,
1
,
val2
<
0
?
0
:
val2
)
}
}
break
case
mode
.
TIME
:
case
mode
.
DATE
:
valueSync
.
value
=
String
(
val
)
break
default
:
{
const
_valueSync
=
Number
(
val
)
valueSync
.
value
=
_valueSync
<
0
?
0
:
_valueSync
break
}
}
}
const
_updatePicker
=
(
data
:
ShowPickerData
)
=>
{
page
.
value
&&
page
.
value
.
sendMessage
(
data
)
}
const
_showWeexPicker
=
(
data
:
ShowPickerData
)
=>
{
let
res
:
{
event
?:
Parameters
<
typeof
emit
>
[
0
]
}
=
{
event
:
'
cancel
'
}
page
.
value
=
showPage
({
url
:
'
__uniapppicker
'
,
data
,
style
:
{
// @ts-expect-error
titleNView
:
false
,
animationType
:
'
none
'
,
animationDuration
:
0
,
background
:
'
rgba(0,0,0,0)
'
,
popGesture
:
'
none
'
,
},
onMessage
:
(
message
)
=>
{
const
event
=
message
.
event
if
(
event
===
'
created
'
)
{
_updatePicker
(
data
)
return
}
if
(
event
===
'
columnchange
'
)
{
delete
message
.
event
trigger
(
event
,
message
)
return
}
res
=
message
},
onClose
:
()
=>
{
page
.
value
=
null
const
event
=
res
.
event
delete
res
.
event
event
&&
trigger
(
event
,
res
)
},
})
}
const
_showNativePicker
=
(
data
:
ShowPickerData
)
=>
{
plus
.
nativeUI
[
props
.
mode
===
mode
.
TIME
?
'
pickTime
'
:
'
pickDate
'
](
(
res
)
=>
{
const
date
=
res
.
date
trigger
(
'
change
'
,
{
value
:
props
.
mode
===
mode
.
TIME
?
`
${
padLeft
(
date
.
getHours
())}
:
${
padLeft
(
date
.
getMinutes
())}
`
:
`
${
date
.
getFullYear
()}
-
${
padLeft
(
date
.
getMonth
()
+
1
)}
-
${
padLeft
(
date
.
getDate
())}
`
,
})
},
()
=>
{
trigger
(
'
cancel
'
,
{})
},
props
.
mode
===
mode
.
TIME
?
{
time
:
getDate
(
props
.
value
,
mode
.
TIME
),
}
:
{
date
:
getDate
(
props
.
value
,
mode
.
DATE
),
minDate
:
getDate
(
props
.
start
,
mode
.
DATE
),
maxDate
:
getDate
(
props
.
end
,
mode
.
DATE
),
}
)
}
const
_showPicker
=
(
data
:
ShowPickerData
)
=>
{
if
(
(
data
.
mode
===
mode
.
TIME
||
data
.
mode
===
mode
.
DATE
)
&&
!
data
.
fields
)
{
_showNativePicker
(
data
)
}
else
{
data
.
fields
=
Object
.
values
(
fields
).
includes
(
data
.
fields
as
Field
)
?
data
.
fields
:
fields
.
DAY
_showWeexPicker
(
data
)
}
}
const
_show
=
(
event
:
MouseEvent
)
=>
{
if
(
props
.
disabled
)
{
return
}
_showPicker
(
Object
.
assign
({},
props
,
{
value
:
valueSync
.
value
,
locale
:
getLocale
(),
messages
:
{
done
:
t
(
'
uni.picker.done
'
),
cancel
:
t
(
'
uni.picker.cancel
'
),
},
})
)
}
/* const uniForm = inject<UniFormCtx>(
uniFormKey,
false as unknown as UniFormCtx
)
const formField = {
submit: (): [string, any] => [props.name, valueSync.value],
reset: () => {
switch (props.mode) {
case mode.SELECTOR:
valueSync.value = 0
break
case mode.MULTISELECTOR:
Array.isArray(props.value) &&
(valueSync.value = props.value.map((val) => 0))
break
case mode.DATE:
case mode.TIME:
valueSync.value = ''
break
default:
break
}
},
}
if (uniForm) {
uniForm.addField(formField)
onBeforeUnmount(() => uniForm.removeField(formField))
} */
Object
.
keys
(
props
).
forEach
((
key
)
=>
{
watch
(
()
=>
(
props
as
any
)[
key
],
(
val
)
=>
{
const
data
=
{}
;(
data
as
any
)[
key
]
=
val
_updatePicker
(
data
as
any
)
},
{
deep
:
true
}
)
})
watch
(()
=>
props
.
value
,
_setValueSync
,
{
deep
:
true
})
_setValueSync
()
return
()
=>
{
return
(
<
uni
-
picker
ref
=
{
rootRef
}
onClick
=
{
_show
}
>
{
slots
.
default
&&
slots
.
default
()
}
</
uni
-
picker
>
)
}
},
})
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录