Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
7c84409f
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,发现更多精彩内容 >>
提交
7c84409f
编写于
1月 08, 2019
作者:
F
Frans
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update
上级
4997c7e3
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
270 addition
and
130 deletion
+270
-130
sites/doc/asset/css/style-blue.scss
sites/doc/asset/css/style-blue.scss
+22
-22
src/config.json
src/config.json
+10
-0
src/mixins/findCptUpward/index.js
src/mixins/findCptUpward/index.js
+17
-0
src/packages/radio/demo.vue
src/packages/radio/demo.vue
+66
-22
src/packages/radio/doc.md
src/packages/radio/doc.md
+83
-17
src/packages/radio/index.js
src/packages/radio/index.js
+1
-1
src/packages/radio/radio.vue
src/packages/radio/radio.vue
+51
-22
src/packages/radiogroup/demo.vue
src/packages/radiogroup/demo.vue
+0
-24
src/packages/radiogroup/doc.md
src/packages/radiogroup/doc.md
+0
-0
src/packages/radiogroup/index.js
src/packages/radiogroup/index.js
+1
-2
src/packages/radiogroup/radiogroup.vue
src/packages/radiogroup/radiogroup.vue
+19
-20
未找到文件。
sites/doc/asset/css/style-blue.scss
浏览文件 @
7c84409f
...
...
@@ -4,20 +4,20 @@
h1
{
font-size
:
28px
;
font-weight
:
700
;
margin
:
10px
0
;
margin
:
10px
0
;
color
:
#333333
;
}
p
{
font-size
:
14px
;
margin
:
10px
0
;
margin
:
10px
0
;
}
h1
+
p
,
h1
+
p
+
p
,
h1
+
p
+
p
{
color
:
#333333
;
}
}
h2
{
margin
:
30px
0
15px
;
margin
:
30px
0
15px
;
font-size
:
22px
;
font-weight
:
400
;
color
:
#333333
;
...
...
@@ -25,8 +25,9 @@
h2
+
p
,
h2
+
p
+
p
{
color
:
#3F4449
;
}
}
h3
{
margin
:
20px
0
10px
;
font-size
:
18px
;
font-weight
:
400
;
color
:
#333333
;
...
...
@@ -34,11 +35,11 @@
h3
+
p
,
h3
+
p
+
p
{
color
:
#3F4449
;
}
}
h4
{
font-size
:
14px
;
font-weight
:
normal
;
margin
:
15px
0
;
margin
:
15px
0
;
color
:
#666666
;
}
h4
+
p
,
...
...
@@ -48,8 +49,7 @@
}
h4
+
p
:
:
nth-child
(
n
)
{
color
:
#666666
;
}
}
blockquote
{
padding
:
0
;
margin
:
0
;
...
...
@@ -68,22 +68,22 @@
font-style
:
normal
;
}
}
ul
{
ul
{
border-radius
:
3px
;
padding
:
5px
20px
;
padding
:
5px
20px
;
list-style
:
none
;
p
{
margin
:
0
;
p
{
margin
:
0
;
}
ul
{
margin
:
0
;
padding
:
0
;
ul
{
margin
:
0
;
padding
:
0
;
}
li
{
font-size
:
14px
;
color
:
#455A64
;
padding
:
7px
;
line-height
:
20px
;
line-height
:
20px
;
display
:
flex
;
align-items
:
center
;
}
...
...
@@ -101,7 +101,7 @@
background
:
#F2F4F5
;
border-radius
:
3px
;
padding
:
13px
40px
;
li
{
li
{
line-height
:
20px
;
padding
:
7px
0
0
10px
;
font-size
:
14px
;
...
...
@@ -110,8 +110,8 @@
}
ul
,
ol
,
p
,
table
{
p
,
table
{
em
{
color
:
#8cade9
;
font-style
:
normal
;
...
...
@@ -167,10 +167,10 @@
white-space
:
unset
;
word-break
:
break-all
;
}
a
{
a
{
color
:
#5396ff
;
text-decoration
:
none
;
&
:hover
{
&
:hover
{
text-decoration
:
underline
;
}
}
...
...
src/config.json
浏览文件 @
7c84409f
...
...
@@ -329,6 +329,16 @@
"desc"
:
"单选按钮,可组合成单选按钮组"
,
"author"
:
"Frans"
},
{
"name"
:
"RadioGroup"
,
"version"
:
"1.0.0"
,
"sort"
:
"1"
,
"chnName"
:
"单选按钮组"
,
"type"
:
"component"
,
"showDemo"
:
false
,
"desc"
:
"单选按钮组"
,
"author"
:
"Frans"
},
{
"version"
:
"1.0.0"
,
"name"
:
"CheckBox"
,
...
...
src/mixins/findCptUpward/index.js
0 → 100644
浏览文件 @
7c84409f
export
default
{
methods
:
{
findCptUpward
(
cptName
)
{
let
parentCpt
=
this
.
$parent
;
while
(
parentCpt
)
{
if
(
parentCpt
.
$options
.
name
===
cptName
){
this
.
parent
=
parentCpt
;
break
;
}
parentCpt
=
parent
.
$parent
;
}
}
}
}
src/packages/radio/demo.vue
浏览文件 @
7c84409f
<
template
>
<div
class=
"demo-list"
>
<h4>
基本用法
</h4>
<h4>
Radio基本用法
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radio
v-model=
"radioVal"
:label=
"2"
>
备选项
</nut-radio>
</span>
</nut-cell>
</div>
<h4>
组合使用Radio
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
...
...
@@ -10,25 +19,48 @@
<div
slot=
"desc"
>
radioVal1:
{{
radioVal1
}}
</div>
</nut-cell>
</div>
<p>
组合使用 Radio 时推荐使用 radiogroup 组件,见下方示例
</p>
<h4>
禁用状态
</h4>
<h4>
RadioGroup基本用法
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radio
:disabled=
"true"
v-model=
"radioVal2"
label=
"禁用"
>
备选项1
</nut-radio>
<nut-radiogroup
v-model=
"radioGroupVal1"
>
<nut-radio
label=
"a"
>
备选项1
</nut-radio>
<nut-radio
label=
"b"
>
备选项2
</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
</div>
<h4>
Radio禁用
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radio
:disabled=
"true"
v-model=
"radioVal2"
label=
"选中且禁用"
>
备选项2
</nut-radio>
未选中时的禁用状态:
<nut-radio
:disabled=
"true"
v-model=
"radioVal2"
label=
"禁用"
>
备选项1
</nut-radio>
</span>
</nut-cell>
<nut-cell>
<span
slot=
"title"
>
radioVal2:
{{
radioVal2
}}
</span>
<span
slot=
"title"
>
已选中时的禁用状态:
<nut-radio
:disabled=
"true"
v-model=
"radioVal2"
label=
"选中且禁用"
>
备选项2
</nut-radio>
</span>
</nut-cell>
</div>
<h4>
自定义尺寸
</h4>
<h4>
RadioGroup整体禁用
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radiogroup
v-model=
"radioGroupVal2"
:disabled=
"true"
>
<nut-radio
label=
"1"
>
备选项1
</nut-radio>
<nut-radio
label=
"2"
>
备选项2
</nut-radio>
<nut-radio
label=
"3"
>
备选项3
</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
</div>
<h4>
Radio自定义尺寸
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
...
...
@@ -48,34 +80,45 @@
<p>
size可选值:'small', 'base', 'large'
</p>
</div>
<h4>
禁用动效
</h4>
<h4>
RadioGroup整体定义尺寸
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radio
:animation=
"false"
v-model=
"radioVal3"
label=
"a"
>
备选项1
</nut-radio>
<nut-radiogroup
v-model=
"radioGroupVal3"
size=
"large"
>
<nut-radio
label=
"1"
>
备选项1
</nut-radio>
<nut-radio
label=
"2"
>
备选项2
</nut-radio>
<nut-radio
label=
"3"
>
备选项3
</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
</div>
<h4>
Radio禁用动效
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radio
:animat
ion=
"false"
v-model=
"radioVal3"
label=
"b"
>
备选项2
</nut-radio>
<nut-radio
:animat
ed=
"false"
v-model=
"radioVal3"
label=
"a"
>
备选项1
</nut-radio>
</span>
</nut-cell>
<p>
animation属性值为false时,禁用自带动效
</p>
</div>
<h4>
事件
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radio
v-model=
"radioVal4"
label=
"a"
@
change=
"radioChange"
>
备选项1
</nut-radio>
<nut-radio
:animated=
"false"
v-model=
"radioVal3"
label=
"b"
>
备选项2
</nut-radio>
</span>
</nut-cell>
<p>
animated 属性值为 false 时,禁用自带动效
</p>
</div>
<h4>
RadioGroup禁用动效
</h4>
<div>
<nut-cell>
<span
slot=
"title"
>
<nut-radio
v-model=
"radioVal4"
label=
"b"
@
change=
"radioChange"
>
备选项2
</nut-radio>
<nut-radiogroup
v-model=
"radioGroupVal4"
:animated=
"false"
>
<nut-radio
label=
"a"
>
备选项1
</nut-radio>
<nut-radio
label=
"b"
>
备选项2
</nut-radio>
<nut-radio
label=
"c"
>
备选项3
</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
<p>
值发生变化时,将触发change事件
</p>
</div>
<h4>
自定义Class
</h4>
...
...
@@ -98,18 +141,19 @@
export
default
{
data
()
{
return
{
r
esult
:
""
,
r
adioVal
:
1
,
radioVal1
:
2
,
radioVal2
:
"
选中且禁用
"
,
radioVal3
:
"
b
"
,
radioVal4
:
"
b
"
,
radioVal5
:
"
a
"
radioVal5
:
"
a
"
,
radioGroupVal1
:
"
b
"
,
radioGroupVal2
:
"
2
"
,
radioGroupVal3
:
"
2
"
,
radioGroupVal4
:
"
c
"
,
};
},
methods
:
{
radioChange
(
label
)
{
alert
(
"
选中的是
"
+
label
);
}
}
};
</
script
>
...
...
src/packages/radio/doc.md
浏览文件 @
7c84409f
...
...
@@ -2,6 +2,26 @@
## 基本用法
通过
**v-model**
绑定值当前选中项的
**label**
,二者一致时
**Radio**
选中。
```
html
<nut-radio
v-model=
"radioVal"
:label=
"b"
>
备选项1
</nut-radio>
```
```
javascript
export
default
{
data
()
{
return
{
radioVal
:
"
a
"
,
}
}
};
```
## 组合使用
```
html
<nut-radio
v-model=
"radioVal1"
...
...
@@ -15,9 +35,29 @@
>
备选项2
</nut-radio>
```
> 组合使用 **Radio** 组件时,推荐使用 **RadioGroup** 组件,按需加载时,别忘了引入哦
```
html
<nut-radiogroup
v-model=
"radioGroupVal1"
>
<nut-radio
label=
"a"
>
备选项1
</nut-radio>
<nut-radio
label=
"b"
>
备选项2
</nut-radio>
</nut-radiogroup>
```
```
javascript
export
default
{
data
()
{
return
{
radioGroupVal1
:
"
b
"
,
}
}
};
```
## 禁用状态
非选中时的禁用状态
通过给
**disabled**
传布尔值
**false**
,可将组件禁用
```
html
<nut-radio
...
...
@@ -28,15 +68,15 @@
</nut-radio>
```
选中时的禁用状态
RadioGroup整体禁用
```
html
<nut-radio
:disabled=
"true"
v-model=
"radioVal2"
label=
"选中且禁用"
>
备选项2
</nut-radio>
<nut-radiogroup
v-model=
"radioGroupVal2"
:disabled=
"true"
>
<nut-radio
label=
"1"
>
备选项1
</nut-radio>
<nut-radio
label=
"2"
>
备选项2
</nut-radio>
<nut-radio
label=
"3"
>
备选项3
</nut-radio>
</nut-radiogroup>
```
## 自定义尺寸
...
...
@@ -60,25 +100,45 @@
</nut-radio>
```
自定义RadioGroup整体尺寸
```
html
<nut-radiogroup
v-model=
"radioGroupVal3"
size=
"large"
>
<nut-radio
label=
"1"
>
备选项1
</nut-radio>
<nut-radio
label=
"2"
>
备选项2
</nut-radio>
<nut-radio
label=
"3"
>
备选项3
</nut-radio>
</nut-radiogroup>
```
## 禁用动效
animation属性值为false时
,禁用自带动效
通过给
**animated**
传布尔值
**false**
,禁用自带动效
```
html
<nut-radio
:animat
ion
=
"false"
:animat
ed
=
"false"
v-model=
"radioVal3"
label=
"a"
>
备选项1
</nut-radio>
<nut-radio
:animat
ion
=
"false"
:animat
ed
=
"false"
v-model=
"radioVal3"
label=
"b"
>
备选项2
</nut-radio>
```
禁用
**RadioGroup**
动效
```
html
<nut-radiogroup
v-model=
"radioGroupVal4"
:animated=
"false"
>
<nut-radio
label=
"a"
>
备选项1
</nut-radio>
<nut-radio
label=
"b"
>
备选项2
</nut-radio>
<nut-radio
label=
"c"
>
备选项3
</nut-radio>
</nut-radiogroup>
```
## 新增自定义class
```
html
...
...
@@ -86,8 +146,11 @@ animation属性值为false时,禁用自带动效
class=
"my-radio"
>
备选项
</nut-radio>
```
**RadioGroup**
也支持新增自定义class
## API
## Props
### Radio
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
...
...
@@ -95,10 +158,13 @@ animation属性值为false时,禁用自带动效
| label | 标识符,与v-model值一致时呈选中状态 | 任意类型 | -
| size | 尺寸,可选值small/base/large | String | base
| disabled | 是否禁用 | Boolean | false
| animat
ion
| 是否需要动效 | Boolean | true
| animat
ed
| 是否需要动效 | Boolean | true
##
Event
##
# RadioGroup
| 字段 | 说明 | 回调参数
|----- | ----- | -----
| change | 值变化时触发 | 当前选中项标识符(label)
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| v-model | 当前选中项的标识符,与label值一致时呈选中状态 | 任意类型 | -
| size | 尺寸,可选值small/base/large | String | base
| disabled | 是否禁用 | Boolean | false
| animated | 是否需要动效 | Boolean | true
src/packages/radio/index.js
浏览文件 @
7c84409f
...
...
@@ -6,4 +6,4 @@ Radio.install = function(Vue) {
};
export
default
Radio
\ No newline at end of file
export
default
Radio
;
\ No newline at end of file
src/packages/radio/radio.vue
浏览文件 @
7c84409f
<
template
>
<label
:class=
"['nut-radio','nut-radio-size-'+size]"
>
<input
type=
"radio"
:class=
"
{'nut-radio-ani':animation}"
:checked="value===label"
:disabled="disabled"
:label="label"
:value="value"
@change="changeEvt"
<label
:class=
"['nut-radio','nut-radio-size-'+currentSize]"
@
click=
"clickEvt"
>
<input
type=
"radio"
:value=
"currentValue"
:class=
"
{'nut-radio-ani':isAnimated}"
:checked="currentValue === label"
:disabled="isDisabled"
:label="label"
>
<span
class=
"nut-radio-label"
>
<slot></slot>
</span>
</label>
</label>
</
template
>
<
script
>
import
findCptUpward
from
"
../../mixins/findCptUpward/index.js
"
;
export
default
{
name
:
"
nut-radio
"
,
mixins
:
[
findCptUpward
],
props
:
{
value
:
{
type
:
[
String
,
Number
,
Boolean
],
default
:
false
},
label
:{
type
:
[
String
,
Number
,
Boolean
]
type
:
[
String
,
Number
,
Boolean
],
default
:
false
},
label
:
[
String
,
Number
,
Boolean
],
size
:
{
type
:
String
,
default
:
'
base
'
default
:
"
base
"
},
disabled
:
{
type
:
Boolean
,
default
:
false
},
animat
ion
:
{
animat
ed
:
{
type
:
Boolean
,
default
:
true
}
},
data
()
{
return
{}
return
{
parent
:
null
};
},
computed
:
{
currentValue
:
{
get
()
{
return
this
.
parent
?
this
.
parent
.
value
:
this
.
value
;
},
set
(
val
)
{
(
this
.
parent
||
this
).
$emit
(
"
input
"
,
val
);
}
},
currentSize
()
{
return
this
.
parent
?
this
.
parent
.
size
||
this
.
size
:
this
.
size
;
},
isDisabled
()
{
return
this
.
parent
?
this
.
parent
.
disabled
||
this
.
disabled
:
this
.
disabled
;
},
isAnimated
()
{
return
this
.
parent
?
this
.
parent
.
animated
&&
this
.
animated
:
this
.
animated
;
}
},
mounted
(){
created
()
{
this
.
findCptUpward
(
"
nut-radiogroup
"
);
},
methods
:
{
changeEvt
(
event
)
{
this
.
$emit
(
"
change
"
,
this
.
label
);
this
.
$emit
(
'
input
'
,
this
.
label
);
clickEvt
(
event
)
{
if
(
this
.
isDisabled
)
{
return
false
;
}
this
.
currentValue
=
this
.
label
;
}
}
};
...
...
src/packages/radiogroup/demo.vue
浏览文件 @
7c84409f
<
template
>
<div>
<nut-radiogroup>
<nut-radio
label=
"禁用"
>
备选项1
</nut-radio>
<nut-radio
label=
"禁用2"
>
备选项2
</nut-radio>
</nut-radiogroup>
</div>
</
template
>
...
...
@@ -11,27 +7,7 @@
export
default
{
data
()
{
return
{
myData
:[
{
id
:
1
,
text
:
'
备选项1
'
,
label
:
'
a
'
,
},
{
id
:
2
,
text
:
'
备选项2
'
,
label
:
'
b
'
,
},
{
id
:
3
,
text
:
'
备选项3
'
,
label
:
'
c
'
},
]
};
},
methods
:
{
}
};
</
script
>
...
...
src/packages/radiogroup/doc.md
已删除
100644 → 0
浏览文件 @
4997c7e3
src/packages/radiogroup/index.js
浏览文件 @
7c84409f
import
RadioGroup
from
'
./radiogroup.vue
'
;
import
'
./radiogroup.scss
'
;
RadioGroup
.
install
=
function
(
Vue
)
{
Vue
.
component
(
RadioGroup
.
name
,
RadioGroup
);
};
export
default
RadioGroup
\ No newline at end of file
export
default
RadioGroup
;
\ No newline at end of file
src/packages/radiogroup/radiogroup.vue
浏览文件 @
7c84409f
<
template
>
<div
class=
"nut-radiogroup"
>
<slot></slot>
<!--
<nut-radio
v-for=
"rdo in gData"
:key=
"rdo.id"
:label=
"rdo.label"
>
{{
rdo
.
text
}}
</nut-radio>
-->
</div>
<div
class=
"nut-radiogroup"
>
<slot></slot>
</div>
</
template
>
<
script
>
export
default
{
name
:
'
nut-radiogroup
'
,
props
:
{
groupData
:{
type
:
Array
,
default
(){
return
[];
}
}
name
:
"
nut-radiogroup
"
,
props
:
{
value
:
{
type
:
[
String
,
Number
,
Boolean
],
default
:
false
},
data
()
{
return
{
gData
:
this
.
groupData
};
disabled
:
{
type
:
Boolean
,
default
:
false
},
methods
:
{
size
:
{
type
:
String
,
default
:
"
base
"
},
mounted
(){
console
.
log
(
1234
,
this
);
animated
:
{
type
:
Boolean
,
default
:
true
}
}
}
};
</
script
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录