Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
aa0c7e13
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,发现更多精彩内容 >>
提交
aa0c7e13
编写于
8月 17, 2020
作者:
Y
yangkaixuan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: radio group bug
上级
b2196633
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
98 addition
and
132 deletion
+98
-132
docs/start.md
docs/start.md
+3
-1
src/packages/radio/demo.vue
src/packages/radio/demo.vue
+4
-8
src/packages/radio/doc.md
src/packages/radio/doc.md
+6
-6
src/packages/radio/index.scss
src/packages/radio/index.scss
+0
-14
src/packages/radio/index.vue
src/packages/radio/index.vue
+0
-88
src/packages/radiogroup/radiogroup.scss
src/packages/radiogroup/radiogroup.scss
+11
-1
src/packages/radiogroup/radiogroup.vue
src/packages/radiogroup/radiogroup.vue
+74
-14
未找到文件。
docs/start.md
浏览文件 @
aa0c7e13
...
...
@@ -154,7 +154,9 @@ npm i @nutui/babel-plugin-separate-import -D
```
bash
{
"plugins"
:
[
[
"@nutui/babel-plugin-separate-import"
,
{
[
"@nutui/babel-plugin-separate-import"
,
{
"libraryName"
:
"@nutui/nutui-jdl"
,
"libraryDirectory"
:
"dist/packages"
,
"style"
:
"scss"
}]
]
...
...
src/packages/radio/demo.vue
浏览文件 @
aa0c7e13
<
template
>
<div
class=
"demo-list"
>
<h4>
基础样式
</h4>
<
radio-
group
<
nut-radio
group
:list=
"labelList"
:name=
"'test0'"
:styleType=
"'radio'"
...
...
@@ -14,7 +14,7 @@
/>
<div
class=
"cell-reslout"
>
选择结果
{{
resloutdemo1
}}
:
{{
labelReslut0
}}
</div>
<h4>
列表样式
</h4>
<
radio-
group
<
nut-radio
group
:list=
"labelList"
:style-type=
"'list'"
:name=
"'test3'"
...
...
@@ -27,7 +27,7 @@
/>
<div
class=
"cell-reslout"
>
选择结果
{{
resloutdemo1
}}
:
{{
labelReslut2
}}
</div>
<h4>
列表禁选样式
</h4>
<
radio-
group
<
nut-radio
group
:list=
"labelList"
:style-type=
"'list'"
:name=
"'test4'"
...
...
@@ -40,7 +40,7 @@
/>
<div
class=
"cell-reslout"
>
选择结果
{{
resloutdemo1
}}
:
{{
labelReslut3
}}
</div>
<h4>
按钮样式
</h4>
<
radio-
group
<
nut-radio
group
:list=
"labelList2"
:name=
"'test'"
:styleType=
"'label'"
...
...
@@ -56,7 +56,6 @@
</
template
>
<
script
>
import
group
from
'
./index.vue
'
;
export
default
{
data
()
{
return
{
...
...
@@ -138,9 +137,6 @@ export default {
radioDisable
:
false
,
};
},
components
:
{
'
radio-group
'
:
group
,
},
watch
:
{
disableVal
(
val
)
{
if
(
!
isNaN
(
val
))
{
...
...
src/packages/radio/doc.md
浏览文件 @
aa0c7e13
...
...
@@ -50,7 +50,7 @@ export default {
```
html
<nut-cell>
<span
slot=
"title"
>
<
radio-group
<
nut-radiogroup
:list=
"labelList"
:name=
"'test0'"
:effect-key =
"'value'"
...
...
@@ -60,7 +60,7 @@ export default {
</span>
</nut-cell>
<nut-cell>
<span
slot=
"title"
>
选择结果 {{labelReslut0}}
</span>
<span
slot=
"title"
>
选择结果 {{labelReslut0}
}
</span>
</nut-cell>
```
...
...
@@ -69,7 +69,7 @@ export default {
```
html
<nut-cell>
<span
slot=
"title"
>
<
radio-group
<
nut-radiogroup
:list=
"labelList"
:name=
"'test'"
:styleType=
"'label'"
...
...
@@ -82,7 +82,7 @@ export default {
</span>
</nut-cell>
<nut-cell>
<span
slot=
"title"
>
选择结果 {{labelReslut}}
</span>
<span
slot=
"title"
>
选择结果 {{labelReslut}
}
</span>
</nut-cell>
```
...
...
@@ -91,7 +91,7 @@ export default {
```
html
<nut-cell>
<span
slot=
"title"
>
<
radio-group
<
nut-radiogroup
:list=
"labelList"
:style-type=
"'list'"
:name=
"'test3'"
...
...
@@ -105,7 +105,7 @@ export default {
</span>
</nut-cell>
<nut-cell>
<span
slot=
"title"
>
选择结果 {{resloutdemo1}
}: {{labelReslut2}
}
</span>
<span
slot=
"title"
>
选择结果 {{resloutdemo1}
}: {{labelReslut2}
}
</span>
</nut-cell>
```
...
...
src/packages/radio/index.scss
已删除
100644 → 0
浏览文件 @
b2196633
.nut-radio
{
.nut-radio-labels
{
width
:
100%
;
display
:
flex
;
flex-wrap
:
wrap
;
padding
:
18px
16px
;
box-sizing
:
border-box
;
.nut-radio-list-label
{
margin
:
5px
2
.3px
;
}
}
.nut-radio-lists
{
}
}
src/packages/radio/index.vue
已删除
100644 → 0
浏览文件 @
b2196633
<
template
>
<div
class=
"nut-radio"
>
<div
:class=
"
{
'nut-radio-labels': styleType === 'label',
'nut-radio-lists': styleType === 'list',
}"
v-if="list
&&
list.length > 0"
>
<nut-radio
v-for=
"(item, index) in list"
:key=
"item[effectKey]"
:type=
"styleType"
:name=
"name"
:text=
"item[effectText]"
:value=
"item[effectKey]"
:radio-data=
"item"
:checked=
"checkedIndex === index"
@
radioChange=
"radioChange"
:disabled=
"disabledValue | disabledFilter(index)"
/>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
'
radio-group
'
,
props
:
{
styleType
:
String
,
// label
type
:
String
,
// radio 展示
list
:
Array
,
// radio 需要的数据信息
checkedIndex
:
{
type
:
Number
,
default
:
-
1
,
},
// 初始化选中数组第几个从 0 开始
effectKey
:
String
,
// 绑定有效值对应属性 key
effectText
:
String
,
// 有效显示文案对应属性 key
resloutAttr
:
String
,
// 选择结果展示属性值类型 key
name
:
String
,
// radio 标签 name
disabledValue
:
[
String
,
Number
,
Boolean
,
Array
],
// 禁用的 radio 需要传一个数组
},
mounted
()
{
if
(
this
.
checkedIndex
>
-
1
&&
this
.
list
&&
this
.
list
.
length
>
0
)
{
this
.
$emit
(
'
input
'
,
this
.
list
[
this
.
checkedIndex
][
this
.
inputReslout
]);
}
},
methods
:
{
radioChange
(
obj
)
{
this
.
$emit
(
'
input
'
,
obj
[
this
.
inputReslout
]);
},
},
watch
:
{
list
(
val
)
{
if
(
val
&&
val
.
length
>
0
&&
this
.
checkedIndex
>
-
1
)
{
this
.
$emit
(
'
input
'
,
val
[
this
.
checkedIndex
][
this
.
inputReslout
]);
}
},
resloutAttr
(
res
)
{
if
(
this
.
list
&&
this
.
list
.
length
>
0
&&
this
.
checkedIndex
>
-
1
)
{
this
.
$emit
(
'
input
'
,
this
.
list
[
this
.
checkedIndex
][
res
]);
}
},
},
filters
:
{
disabledFilter
(
propObj
,
index
)
{
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object Number]
'
)
{
return
propObj
===
index
;
}
else
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object Array]
'
)
{
return
propObj
.
indexOf
(
index
)
>
-
1
;
}
else
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object String]
'
)
{
return
propObj
===
'
all
'
;
}
else
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object Boolean]
'
)
{
return
propObj
;
}
else
{
return
false
;
}
},
},
computed
:
{
inputReslout
()
{
return
this
.
resloutAttr
||
this
.
effectText
;
},
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
@import
'./index.scss'
;
</
style
>
src/packages/radiogroup/radiogroup.scss
浏览文件 @
aa0c7e13
.nut-radiogroup
{
.nut-radio
{
.nut-radio-labels
{
width
:
100%
;
display
:
flex
;
flex-wrap
:
wrap
;
padding
:
18px
16px
;
box-sizing
:
border-box
;
.nut-radio-list-label
{
margin
:
5px
2
.3px
;
}
}
}
src/packages/radiogroup/radiogroup.vue
浏览文件 @
aa0c7e13
<
template
>
<div
class=
"nut-radiogroup"
>
<slot></slot>
<div
class=
"nut-radio"
>
<div
:class=
"
{
'nut-radio-labels': styleType === 'label',
'nut-radio-lists': styleType === 'list',
}"
v-if="list
&&
list.length > 0"
>
<nut-radio
v-for=
"(item, index) in list"
:key=
"item[effectKey]"
:type=
"styleType"
:name=
"name"
:text=
"item[effectText]"
:value=
"item[effectKey]"
:radio-data=
"item"
:checked=
"checkedIndex === index"
@
radioChange=
"radioChange"
:disabled=
"disabledValue | disabledFilter(index)"
/>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
'
nut-radiogroup
'
,
props
:
{
value
:
{
type
:
[
String
,
Number
,
Boolean
],
default
:
false
,
styleType
:
String
,
// label
type
:
String
,
// radio 展示
list
:
Array
,
// radio 需要的数据信息
checkedIndex
:
{
type
:
Number
,
default
:
-
1
,
},
// 初始化选中数组第几个从 0 开始
effectKey
:
String
,
// 绑定有效值对应属性 key
effectText
:
String
,
// 有效显示文案对应属性 key
resloutAttr
:
String
,
// 选择结果展示属性值类型 key
name
:
String
,
// radio 标签 name
disabledValue
:
[
String
,
Number
,
Boolean
,
Array
],
// 禁用的 radio 需要传一个数组
},
mounted
()
{
if
(
this
.
checkedIndex
>
-
1
&&
this
.
list
&&
this
.
list
.
length
>
0
)
{
this
.
$emit
(
'
input
'
,
this
.
list
[
this
.
checkedIndex
][
this
.
inputReslout
]);
}
},
methods
:
{
radioChange
(
obj
)
{
this
.
$emit
(
'
input
'
,
obj
[
this
.
inputReslout
]);
},
},
watch
:
{
list
(
val
)
{
if
(
val
&&
val
.
length
>
0
&&
this
.
checkedIndex
>
-
1
)
{
this
.
$emit
(
'
input
'
,
val
[
this
.
checkedIndex
][
this
.
inputReslout
]);
}
},
disabled
:
{
type
:
Boolean
,
default
:
false
,
resloutAttr
(
res
)
{
if
(
this
.
list
&&
this
.
list
.
length
>
0
&&
this
.
checkedIndex
>
-
1
)
{
this
.
$emit
(
'
input
'
,
this
.
list
[
this
.
checkedIndex
][
res
]);
}
},
size
:
{
type
:
String
,
default
:
'
base
'
,
},
filters
:
{
disabledFilter
(
propObj
,
index
)
{
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object Number]
'
)
{
return
propObj
===
index
;
}
else
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object Array]
'
)
{
return
propObj
.
indexOf
(
index
)
>
-
1
;
}
else
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object String]
'
)
{
return
propObj
===
'
all
'
;
}
else
if
(
Object
.
prototype
.
toString
.
apply
(
propObj
)
===
'
[object Boolean]
'
)
{
return
propObj
;
}
else
{
return
false
;
}
},
animated
:
{
type
:
Boolean
,
default
:
true
,
},
computed
:
{
inputReslout
()
{
return
this
.
resloutAttr
||
this
.
effectText
;
},
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
@import
'./radiogroup.scss'
;
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录