Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yangkaifeng
uni-app
提交
424f7e2e
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,发现更多精彩内容 >>
提交
424f7e2e
编写于
2月 18, 2022
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(nvue3): radio-group
上级
84017bc5
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
158 addition
and
95 deletion
+158
-95
packages/uni-components/src/components/radio-group.ts
packages/uni-components/src/components/radio-group.ts
+21
-0
packages/uni-components/src/nvue/radio-group/index.tsx
packages/uni-components/src/nvue/radio-group/index.tsx
+55
-43
packages/uni-components/src/nvue/radio/index.tsx
packages/uni-components/src/nvue/radio/index.tsx
+82
-52
未找到文件。
packages/uni-components/src/components/radio-group.ts
浏览文件 @
424f7e2e
import
{
WritableComputedRef
,
ExtractPropTypes
}
from
'
vue
'
import
{
PolySymbol
}
from
'
@dcloudio/uni-core
'
export
const
uniRadioGroupKey
=
PolySymbol
(
__DEV__
?
'
uniRadioGroup
'
:
'
ucg
'
)
export
type
UniRadioGroupFieldCtx
=
WritableComputedRef
<
{
radioChecked
:
boolean
value
:
string
}
>
export
interface
UniRadioGroupCtx
{
addField
:
(
field
:
UniRadioGroupFieldCtx
)
=>
void
removeField
:
(
field
:
UniRadioGroupFieldCtx
)
=>
void
radioChange
:
(
$event
:
Event
,
field
:
UniRadioGroupFieldCtx
)
=>
void
}
export
const
radioGroupProps
=
{
name
:
{
type
:
String
,
default
:
''
,
},
}
export
type
RadioGroupProps
=
ExtractPropTypes
<
typeof
radioGroupProps
>
packages/uni-components/src/nvue/radio-group/index.tsx
浏览文件 @
424f7e2e
...
...
@@ -2,41 +2,27 @@ import {
defineComponent
,
inject
,
provide
,
ComputedRef
,
ref
,
ExtractPropTypes
,
onBeforeUnmount
,
onMounted
,
}
from
'
vue
'
import
{
uniRadioGroupKey
}
from
'
../../components/radio-group
'
import
{
uniRadioGroupKey
,
UniRadioGroupFieldCtx
,
UniRadioGroupCtx
,
RadioGroupProps
,
radioGroupProps
,
}
from
'
../../components/radio-group
'
import
{
UniFormCtx
,
uniFormKey
}
from
'
../../components/form
'
import
{
CustomEventTrigger
,
useCustomEvent
,
EmitEvent
,
}
from
'
../../helpers/useEvent
'
type
UniRadioGroupFieldCtx
=
ComputedRef
<
{
radioChecked
:
boolean
value
:
string
}
>
const
props
=
{
name
:
{
type
:
String
,
default
:
''
,
},
}
type
RadioGroupProps
=
ExtractPropTypes
<
typeof
props
>
export
interface
UniRadioGroupCtx
{
addField
:
(
field
:
UniRadioGroupFieldCtx
)
=>
void
removeField
:
(
field
:
UniRadioGroupFieldCtx
)
=>
void
radioChange
:
(
$event
:
Event
)
=>
void
}
}
from
'
../../helpers/useNVueEvent
'
export
default
defineComponent
({
name
:
'
RadioGroup
'
,
props
,
props
:
radioGroupProps
,
emits
:
[
'
change
'
],
setup
(
props
,
{
slots
,
emit
})
{
const
rootRef
=
ref
<
HTMLElement
|
null
>
(
null
)
...
...
@@ -56,13 +42,12 @@ function useProvideRadioGroup(
)
{
const
fields
:
UniRadioGroupFieldCtx
[]
=
[]
onMounted
(()
=>
{
_resetRadioGroupValue
(
fields
.
length
-
1
)
})
const
getFieldsValue
=
()
=>
fields
.
reduce
((
res
,
field
)
=>
{
if
(
field
.
value
.
radioChecked
)
{
res
.
push
(
field
.
value
.
value
)
}
return
res
},
new
Array
())
fields
.
find
((
field
)
=>
field
.
value
.
radioChecked
)?.
value
.
value
provide
<
UniRadioGroupCtx
>
(
uniRadioGroupKey
,
{
addField
(
field
:
UniRadioGroupFieldCtx
)
{
...
...
@@ -71,26 +56,53 @@ function useProvideRadioGroup(
removeField
(
field
:
UniRadioGroupFieldCtx
)
{
fields
.
splice
(
fields
.
indexOf
(
field
),
1
)
},
radioChange
(
$event
)
{
trigger
(
'
change
'
,
$event
,
{
radioChange
(
$event
:
Event
,
field
:
UniRadioGroupFieldCtx
)
{
const
index
=
fields
.
indexOf
(
field
)
_resetRadioGroupValue
(
index
,
true
)
trigger
(
'
change
'
,
{
value
:
getFieldsValue
(),
})
},
})
const
uniForm
=
inject
<
UniFormCtx
>
(
uniFormKey
,
false
as
unknown
as
UniFormCtx
)
const
formField
=
{
submit
:
()
=>
{
let
data
:
[
string
,
any
]
=
[
''
,
null
]
if
(
props
.
name
!==
''
)
{
data
[
0
]
=
props
.
name
data
[
1
]
=
getFieldsValue
()
}
return
data
},
}
if
(
uniForm
)
{
uniForm
.
addField
({
submit
:
()
=>
{
let
data
:
[
string
,
any
]
=
[
''
,
null
]
if
(
props
.
name
!==
''
)
{
data
[
0
]
=
props
.
name
data
[
1
]
=
getFieldsValue
()
}
return
data
},
uniForm
.
addField
(
formField
)
onBeforeUnmount
(()
=>
{
uniForm
.
removeField
(
formField
)
})
}
function
setFieldChecked
(
field
:
UniRadioGroupFieldCtx
,
radioChecked
:
boolean
)
{
field
.
value
=
{
radioChecked
,
value
:
field
.
value
.
value
,
}
}
function
_resetRadioGroupValue
(
key
:
number
,
change
?:
boolean
)
{
fields
.
forEach
((
value
,
index
)
=>
{
if
(
index
===
key
)
{
return
}
if
(
change
)
{
setFieldChecked
(
fields
[
index
],
false
)
}
})
}
return
getFieldsValue
return
fields
}
packages/uni-components/src/nvue/radio/index.tsx
浏览文件 @
424f7e2e
...
...
@@ -2,16 +2,20 @@ import {
defineComponent
,
inject
,
onBeforeUnmount
,
Ref
,
ref
,
computed
,
watch
,
reactive
,
ExtractPropTypes
,
}
from
'
vue
'
import
{
uniLabelKey
,
UniLabelCtx
}
from
'
../label
'
import
{
useListeners
}
from
'
../../helpers/useListeners
'
import
{
NVueComponentStyles
,
createNVueTextVNode
}
from
'
../utils
'
import
{
radioProps
}
from
'
../../components/radio
'
import
{
uniRadioGroupKey
,
UniRadioGroupCtx
,
}
from
'
../../components/radio-group
'
import
{
UniFormCtx
,
uniFormKey
}
from
'
../../components/form
'
const
radioStyles
:
NVueComponentStyles
=
[
{
...
...
@@ -59,8 +63,6 @@ const radioStyles: NVueComponentStyles = [
},
]
type
RadioProps
=
ExtractPropTypes
<
typeof
radioProps
>
export
default
defineComponent
({
name
:
'
Radio
'
,
props
:
radioProps
,
...
...
@@ -68,47 +70,56 @@ export default defineComponent({
emits
:
[
'
change
'
],
setup
(
props
,
{
slots
})
{
const
rootRef
=
ref
<
HTMLElement
|
null
>
(
null
)
const
radioChecked
=
ref
(
props
.
checked
)
const
radioValue
=
ref
(
props
.
value
)
const
radioStyle
=
computed
(()
=>
{
const
color
=
props
.
disabled
?
'
#adadad
'
:
props
.
color
if
(
radioChecked
.
value
)
{
return
{
backgroundColor
:
color
,
borderColor
:
color
,
}
}
return
{
borderColor
:
'
#d1d1d1
'
,
}
})
const
reset
=
()
=>
{
radioChecked
.
value
=
false
}
const
state
=
useRadioState
(
props
)
const
{
uniCheckGroup
,
uniLabel
,
field
}
=
useRadioInject
(
radioChecked
,
radioValue
,
reset
)
const
onClick
=
(
e
:
Event
,
isLabelClick
?:
boolean
)
=>
{
const
_onClick
=
(
$event
:
Event
,
isLabelClick
?:
boolean
)
=>
{
if
(
props
.
disabled
)
{
return
}
if
(
isLabelClick
)
{
rootRef
.
value
!
.
click
()
}
state
.
radioChecked
=
!
state
.
radioChecked
/* const formType = props.formType
if (formType) {
if (!uniForm) {
return
}
if (formType === 'submit') {
uniForm.submit(e)
} else if (formType === 'reset') {
uniForm.reset(e)
}
} */
radioChecked
.
value
=
!
radioChecked
.
value
uniCheckGroup
&&
uniCheckGroup
.
radioChange
(
$event
,
field
)
}
const
uniLabel
=
inject
<
UniLabelCtx
>
(
uniLabelKey
,
false
as
unknown
as
UniLabelCtx
)
if
(
uniLabel
)
{
uniLabel
.
addHandler
(
onClick
)
uniLabel
.
addHandler
(
_
onClick
)
onBeforeUnmount
(()
=>
{
uniLabel
.
removeHandler
(
onClick
)
uniLabel
.
removeHandler
(
_
onClick
)
})
}
useListeners
(
props
,
{
'
label-click
'
:
onClick
})
useListeners
(
props
,
{
'
label-click
'
:
_
onClick
})
watch
(
[()
=>
props
.
checked
,
()
=>
props
.
value
],
([
newChecked
,
newModelValue
])
=>
{
state
.
radioChecked
=
newChecked
state
.
radioV
alue
=
newModelValue
radioChecked
.
value
=
newChecked
radioValue
.
v
alue
=
newModelValue
}
)
...
...
@@ -127,21 +138,20 @@ export default defineComponent({
return
()
=>
{
const
{
disabled
}
=
props
const
{
radioChecked
,
radioStyle
}
=
state
return
(
<
div
ref
=
{
rootRef
}
{
...{
dataUncType
:
'
uni-radio
'
}
}
onClick
=
{
onClick
}
onClick
=
{
_
onClick
}
class
=
"uni-radio"
>
<
div
style
=
{
radioStyle
}
style
=
{
radioStyle
.
value
}
class
=
"uni-radio-input"
// @ts-expect-error
class
=
{
{
'
uni-radio-input-disabled
'
:
disabled
}
}
>
{
radioChecked
{
radioChecked
.
value
?
createNVueTextVNode
(
'
\
uEA08
'
,
{
class
:
'
uni-radio-input-icon
'
,
})
...
...
@@ -154,29 +164,49 @@ export default defineComponent({
},
})
function
useRadioState
(
props
:
RadioProps
)
{
const
radioChecked
=
ref
(
props
.
checked
)
const
radioValue
=
ref
(
props
.
value
)
const
radioStyle
=
computed
(()
=>
{
if
(
radioChecked
.
value
)
{
return
{
backgroundColor
:
props
.
color
,
borderColor
:
props
.
color
,
}
}
return
{
borderColor
:
'
#d1d1d1
'
,
}
function
useRadioInject
(
radioChecked
:
Ref
<
string
|
boolean
>
,
radioValue
:
Ref
<
string
>
,
reset
:
()
=>
void
)
{
const
field
=
computed
({
get
:
()
=>
({
radioChecked
:
Boolean
(
radioChecked
.
value
),
value
:
radioValue
.
value
,
}),
set
:
({
radioChecked
:
checked
})
=>
{
radioChecked
.
value
=
checked
},
})
const
formField
=
{
reset
}
const
uniCheckGroup
=
inject
<
UniRadioGroupCtx
>
(
uniRadioGroupKey
,
false
as
unknown
as
UniRadioGroupCtx
)
if
(
!!
uniCheckGroup
)
{
uniCheckGroup
.
addField
(
field
)
}
const
radioColor
=
computed
(()
=>
(
props
.
disabled
?
'
#adadad
'
:
props
.
color
))
const
uniForm
=
inject
<
UniFormCtx
>
(
uniFormKey
,
false
as
unknown
as
UniFormCtx
)
if
(
!!
uniForm
)
{
uniForm
.
addField
(
formField
)
}
const
state
=
reactive
({
radioStyle
,
radioColor
,
radioChecked
,
radioValue
,
const
uniLabel
=
inject
<
UniLabelCtx
>
(
uniLabelKey
,
false
as
unknown
as
UniLabelCtx
)
onBeforeUnmount
(()
=>
{
uniCheckGroup
&&
uniCheckGroup
.
removeField
(
field
)
uniForm
&&
uniForm
.
removeField
(
formField
)
})
return
state
return
{
uniCheckGroup
,
uniForm
,
uniLabel
,
field
,
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录