# Radio

单选框

案例

import { defineComponent } from "vue";
import { Grid, Radio } from "sl-vue2-template";

const { Col, Row } = Grid;

export default defineComponent({
  data() {
    return {
      checked: false,
      value: "",
    };
  },
  methods: {
    onChange() {
      this.checked = !this.checked;
    },
  },
  render() {
    return (
      <div>
        <Radio checked={this.checked} handlerChange={this.onChange}>
          Radio
        </Radio>
        <Radio checked={this.checked} handlerChange={this.onChange} disabled>
          Radio
        </Radio>
        <Radio
          checked={this.checked}
          handlerChange={(checked) => {
            return (this.checked = checked);
          }}
          color="blue"
          animation={false}
        >
          Radio1
        </Radio>
        <Radio
          checked={this.checked}
          handlerChange={(checked) => {
            return (this.checked = checked);
          }}
          color="waring"
        >
          Radio
        </Radio>
        <Radio
          checked={this.checked}
          handlerChange={() => {
            return (this.checked = !this.checked);
          }}
          color="blue"
        >
          Radio
        </Radio>
        <br />
        <br />
        单选组群
        <br />
        <Radio.Group
          value={this.value}
          handlerChange={(value) => {
            this.value = value;
          }}
        >
          <Radio value={1}>Apple</Radio>
          <Radio value={2}>Pear</Radio>
          <Radio value={3}>Orange</Radio>
        </Radio.Group>
        <Radio.Group
          value={this.value}
          handlerChange={(value) => {
            this.value = value;
          }}
          color="blue"
        >
          <Radio value="1">Apple</Radio>
          <Radio value="2">Pear</Radio>
          <Radio value="3">Orange</Radio>
          <Radio value="4">Orange1</Radio>
        </Radio.Group>
        <Radio.Group
          value={this.value}
          handlerChange={(value) => {
            this.value = value;
          }}
          color="blue"
          disabled
        >
          <Col>
            <Row>
              <Radio value="1">Apple</Radio>
              <Radio value="2">Pear</Radio>
            </Row>
            <Radio value="3">Orange</Radio>
            <Radio value="4">Orange1</Radio>
          </Col>
        </Radio.Group>
        单选组群 关闭动画
        <br />
        <Radio.Group
          value={this.value}
          handlerChange={(value) => {
            this.value = value;
          }}
          animation={false}
        >
          <Radio value={1}>Apple</Radio>
          <Radio value={2}>Pear</Radio>
          <Radio value={3}>Orange</Radio>
        </Radio.Group>
      </div>
    );
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

# 属性

成员	说明	类型	必须	默认值	版本
checked	是否选中	boolean	否	--	--
value	选项值，与 group 一起使用	String\|Number	否	--	--
color	背景/边框颜色	颜色名	否	'primary-color'	--
disabled	禁用	Boolean	否	false	--
animation	动画效果	Boolean	否	true	--
className	自定义 class 名	String	否	--	--

# 事件

事件名称	说明	回调参数	必须	版本
handlerChange	点击的回调	(arg: boolean) => void	否	--

# Radio.Group 单选框组群

单选框组群

# 属性

成员	说明	类型	必须	默认值	版本
value	选项值	string\|number	是	--	--
color	背景/边框颜色	颜色名	否	'primary-color'	--
disabled	禁用	boolean	否	false	--
animation	动画效果	Boolean	否	true	--
className	自定义 class 名	String	否	--	--

# 事件

事件名称	说明	回调参数	必须	版本
handlerChange	点击的回调	(arg: string	number) => void	是

← CheckBox 复选框 Collapse 折叠面板 →