Skip to content

Commit da7853c

Browse files
kscriptkscript
committed
添加radio文档
1 parent 7e40ae0 commit da7853c

File tree

9 files changed

+408
-1
lines changed

9 files changed

+408
-1
lines changed

‎examples/views/Components.ts

+4
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ export const list = [
7575
name: 'ElLink',
7676
title: 'Link 文字链接'
7777
},
78+
{
79+
name: 'ElRadio',
80+
title: 'Radio 单选框'
81+
},
7882
{
7983
name: 'ElTag',
8084
title: 'Tag 标签'

‎examples/views/ElRadio/Base.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<el-card shadow="hover">
3+
<template #header>
4+
<el-radio v-model="radio" label="1">备选项</el-radio>
5+
<el-radio v-model="radio" label="2">备选项</el-radio>
6+
</template>
7+
<el-code collapse :trim="-1" :first="1">
8+
{{`<el-radio v-model="radio" label="1">备选项</el-radio>
9+
<el-radio v-model="radio" label="2">备选项</el-radio>
10+
11+
<script lang="ts">
12+
import { defineComponent, ref } from 'vue'
13+
export default defineComponent({
14+
setup() {
15+
const radio = ref(1)
16+
return {
17+
radio
18+
}
19+
}
20+
})
21+
</script>`}}
22+
<template #desc><slot></slot></template>
23+
</el-code>
24+
</el-card>
25+
</template>
26+
27+
<script lang="ts">
28+
import { defineComponent, ref } from 'vue'
29+
export default defineComponent({
30+
name: 'Base',
31+
setup() {
32+
const radio = ref('1')
33+
return {
34+
radio
35+
}
36+
}
37+
})
38+
</script>

‎examples/views/ElRadio/Border.vue

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<el-card shadow="hover">
3+
<template #header>
4+
<div>
5+
<el-radio v-model="radio1" label="1" border>备选项1</el-radio>
6+
<el-radio v-model="radio1" label="2" border>备选项2</el-radio>
7+
</div>
8+
<div style="margin-top: 20px">
9+
<el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
10+
<el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
11+
</div>
12+
<div style="margin-top: 20px">
13+
<el-radio-group v-model="radio3" size="small">
14+
<el-radio label="1" border>备选项1</el-radio>
15+
<el-radio label="2" border disabled>备选项2</el-radio>
16+
</el-radio-group>
17+
</div>
18+
<div style="margin-top: 20px">
19+
<el-radio-group v-model="radio4" size="mini" disabled>
20+
<el-radio label="1" border>备选项1</el-radio>
21+
<el-radio label="2" border>备选项2</el-radio>
22+
</el-radio-group>
23+
</div>
24+
</template>
25+
<el-code collapse :trim="-1" :first="1">
26+
{{`<el-radio v-model="radio" label="1">备选项</el-radio>
27+
<el-radio v-model="radio" label="2">备选项</el-radio>
28+
29+
<script lang="ts">
30+
import { defineComponent, reactive, toRefs } from 'vue'
31+
export default defineComponent({
32+
setup() {
33+
const state = reactive({
34+
radio1: '1',
35+
radio2: '1',
36+
radio3: '1',
37+
radio4: '1'
38+
})
39+
return {
40+
...toRefs(state)
41+
}
42+
}
43+
})
44+
</script>`}}
45+
<template #desc><slot></slot></template>
46+
</el-code>
47+
</el-card>
48+
</template>
49+
50+
<script lang="ts">
51+
import { defineComponent, reactive, toRefs } from 'vue'
52+
export default defineComponent({
53+
name: 'Border',
54+
setup() {
55+
const state = reactive({
56+
radio1: '1',
57+
radio2: '1',
58+
radio3: '1',
59+
radio4: '1'
60+
})
61+
return {
62+
...toRefs(state)
63+
}
64+
}
65+
})
66+
</script>

‎examples/views/ElRadio/ButtonDemo.vue

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<el-card shadow="hover">
3+
<template #header>
4+
<div>
5+
<el-radio-group v-model="radio1">
6+
<el-radio-button label="上海"></el-radio-button>
7+
<el-radio-button label="北京"></el-radio-button>
8+
<el-radio-button label="广州"></el-radio-button>
9+
<el-radio-button label="深圳"></el-radio-button>
10+
</el-radio-group>
11+
</div>
12+
<div style="margin-top: 20px">
13+
<el-radio-group v-model="radio2" size="medium">
14+
<el-radio-button label="上海" ></el-radio-button>
15+
<el-radio-button label="北京"></el-radio-button>
16+
<el-radio-button label="广州"></el-radio-button>
17+
<el-radio-button label="深圳"></el-radio-button>
18+
</el-radio-group>
19+
</div>
20+
<div style="margin-top: 20px">
21+
<el-radio-group v-model="radio3" size="small">
22+
<el-radio-button label="上海"></el-radio-button>
23+
<el-radio-button label="北京" disabled ></el-radio-button>
24+
<el-radio-button label="广州"></el-radio-button>
25+
<el-radio-button label="深圳"></el-radio-button>
26+
</el-radio-group>
27+
</div>
28+
<div style="margin-top: 20px">
29+
<el-radio-group v-model="radio4" disabled size="mini">
30+
<el-radio-button label="上海"></el-radio-button>
31+
<el-radio-button label="北京"></el-radio-button>
32+
<el-radio-button label="广州"></el-radio-button>
33+
<el-radio-button label="深圳"></el-radio-button>
34+
</el-radio-group>
35+
</div>
36+
</template>
37+
<el-code collapse :trim="-1" :first="1">
38+
{{`<div>
39+
<el-radio-group v-model="radio1">
40+
<el-radio-button label="上海"></el-radio-button>
41+
<el-radio-button label="北京"></el-radio-button>
42+
<el-radio-button label="广州"></el-radio-button>
43+
<el-radio-button label="深圳"></el-radio-button>
44+
</el-radio-group>
45+
</div>
46+
<div style="margin-top: 20px">
47+
<el-radio-group v-model="radio2" size="medium">
48+
<el-radio-button label="上海" ></el-radio-button>
49+
<el-radio-button label="北京"></el-radio-button>
50+
<el-radio-button label="广州"></el-radio-button>
51+
<el-radio-button label="深圳"></el-radio-button>
52+
</el-radio-group>
53+
</div>
54+
<div style="margin-top: 20px">
55+
<el-radio-group v-model="radio3" size="small">
56+
<el-radio-button label="上海"></el-radio-button>
57+
<el-radio-button label="北京" disabled ></el-radio-button>
58+
<el-radio-button label="广州"></el-radio-button>
59+
<el-radio-button label="深圳"></el-radio-button>
60+
</el-radio-group>
61+
</div>
62+
<div style="margin-top: 20px">
63+
<el-radio-group v-model="radio4" disabled size="mini">
64+
<el-radio-button label="上海"></el-radio-button>
65+
<el-radio-button label="北京"></el-radio-button>
66+
<el-radio-button label="广州"></el-radio-button>
67+
<el-radio-button label="深圳"></el-radio-button>
68+
</el-radio-group>
69+
</div>
70+
71+
<script lang="ts">
72+
import { defineComponent, reactive, toRefs } from 'vue'
73+
export default defineComponent({
74+
setup() {
75+
const state = reactive({
76+
radio1: '上海',
77+
radio2: '上海',
78+
radio3: '上海',
79+
radio4: '上海'
80+
})
81+
return {
82+
...toRefs(state)
83+
}
84+
}
85+
})
86+
</script>`}}
87+
<template #desc><slot></slot></template>
88+
</el-code>
89+
</el-card>
90+
</template>
91+
92+
<script lang="ts">
93+
import { defineComponent, reactive, toRefs } from 'vue'
94+
export default defineComponent({
95+
name: 'ButtonDemo',
96+
setup() {
97+
const state = reactive({
98+
radio1: '上海',
99+
radio2: '上海',
100+
radio3: '上海',
101+
radio4: '上海'
102+
})
103+
return {
104+
...toRefs(state)
105+
}
106+
}
107+
})
108+
</script>

‎examples/views/ElRadio/Disabled.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<el-card shadow="hover">
3+
<template #header>
4+
<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
5+
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
6+
</template>
7+
<el-code collapse :trim="-1" :first="1">
8+
{{`<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
9+
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
10+
11+
<script lang="ts">
12+
import { defineComponent, ref } from 'vue'
13+
export default defineComponent({
14+
setup() {
15+
const radio = ref('选中且禁用')
16+
return {
17+
radio
18+
}
19+
}
20+
})
21+
</script>`}}
22+
<template #desc><slot></slot></template>
23+
</el-code>
24+
</el-card>
25+
</template>
26+
27+
<script lang="ts">
28+
import { defineComponent, ref } from 'vue'
29+
export default defineComponent({
30+
name: 'Disabled',
31+
setup() {
32+
const radio = ref('选中且禁用')
33+
return {
34+
radio
35+
}
36+
}
37+
})
38+
</script>

‎examples/views/ElRadio/GroupDemo.vue

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<el-card shadow="hover">
3+
<template #header>
4+
<el-radio-group v-model="radio">
5+
<el-radio :label="3">备选项</el-radio>
6+
<el-radio :label="6">备选项</el-radio>
7+
<el-radio :label="9">备选项</el-radio>
8+
</el-radio-group>
9+
</template>
10+
<el-code collapse :trim="-1" :first="1">
11+
{{`<el-radio-group v-model="radio">
12+
<el-radio :label="3">备选项</el-radio>
13+
<el-radio :label="6">备选项</el-radio>
14+
<el-radio :label="9">备选项</el-radio>
15+
</el-radio-group>
16+
17+
<el-dialog
18+
title="提示"
19+
v\-model:visible="centerDialogVisible"
20+
width="30%"
21+
center>
22+
<span>需要注意的是内容是默认不居中的</span>
23+
<template #footer>
24+
<span class="dialog-footer">
25+
<el-button @click="centerDialogVisible = false">取 消</el-button>
26+
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
27+
</span>
28+
</template>
29+
</el-dialog>
30+
31+
<script lang="ts">
32+
import { defineComponent, ref } from 'vue'
33+
export default defineComponent({
34+
setup() {
35+
const radio = ref(3)
36+
return {
37+
radio
38+
}
39+
}
40+
})
41+
</script>`}}
42+
<template #desc><slot></slot></template>
43+
</el-code>
44+
</el-card>
45+
</template>
46+
47+
<script lang="ts">
48+
import { defineComponent, ref } from 'vue'
49+
export default defineComponent({
50+
name: 'GroupDemo',
51+
setup() {
52+
const radio = ref(3)
53+
return {
54+
radio
55+
}
56+
}
57+
})
58+
</script>

‎examples/views/ElRadio/index.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
## Radio 单选框
2+
在一组备选项中进行单选
3+
4+
### 基础用法
5+
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
6+
<el-radio-base>
7+
要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
8+
</el-radio-base>
9+
10+
### 禁用状态
11+
单选框不可用的状态。
12+
<el-radio-disabled>
13+
只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
14+
</el-radio-disabled>
15+
16+
### 单选框组
17+
适用于在多个互斥的选项中选择的场景
18+
<el-radio-group-demo>
19+
结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
20+
</el-radio-group-demo>
21+
22+
23+
### 按钮样式
24+
按钮样式的单选组合。
25+
<el-radio-button-demo>
26+
只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。
27+
</el-radio-button-demo>
28+
29+
### 带有边框
30+
<i></i>
31+
<el-radio-border>
32+
设置`border`属性可以渲染为带有边框的单选框。
33+
</el-radio-border>
34+
35+
### Radio Attributes
36+
|参数|说明|类型|可选值|默认值|
37+
|--|--|--|--|--|
38+
|value / v-model|绑定值|string / number / boolean|—|—|
39+
|label|Radio 的 value|string / number / boolean|—|—|
40+
|disabled|是否禁用|boolean|—|false|
41+
|border|是否显示边框|boolean|—|false|
42+
|size|Radio 的尺寸，仅在 border 为真时有效|string|medium / small / mini|—|
43+
|name|原生 name 属性|string|—|—|
44+
45+
### Radio Events
46+
|事件名称|说明|回调参数|
47+
|--|--|--|
48+
|change|绑定值变化时触发的事件|选中的 Radio label 值|
49+
50+
### Radio-group Attributes
51+
|参数|说明|类型|可选值|默认值|
52+
|--|--|--|--|--|
53+
|value / v-model|绑定值|string / number / boolean|—|—|
54+
|size|单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效|string|medium / small / mini|—|
55+
|disabled|是否禁用|boolean|—|false|
56+
|text-color|按钮形式的 Radio 激活时的文本颜色|string|—|#ffffff|
57+
|fill|按钮形式的 Radio 激活时的填充色和边框色|string|—|#409EFF|
58+
59+
### Radio-group Events
60+
|事件名称|说明|回调参数|
61+
|--|--|--|
62+
|change|绑定值变化时触发的事件|选中的 Radio label 值|
63+
64+
### Radio-button Attributes
65+
|参数|说明|类型|可选值|默认值|
66+
|--|--|--|--|--|
67+
|label|Radio 的 value|string / number|—|—|
68+
|disabled|是否禁用|boolean|—|false|
69+
|name|原生 name 属性|string|—|—|

0 commit comments

Comments
 (0)