单选（aip-radio）

类似 html 的 radio 标签，提供单选按钮的部分常规功能，可以更好地和表单结合使用。

示例

<div
  aip-state="{
  formModel: {
      disabled: { value: 'apple'},
      radio: {value: ''},
      radio1: {value: 'apple'},
      radio2: {value: 'apple'},
      radio3: {value: 'apple'},
      radio4: {value: 'apple'},
  },
  formModelInit: {
      disabled: { value: ''},
      radio: {value: ''},
      radio1: {value: ''},
      radio2: {value: ''},
      radio3: {value: ''},
      radio4: {value: ''},
  },
}"
>
  <aip-form
    method="POST"
    action-xhr="/examples/aip-download.html"
    [data]="formModel"
    (aip-submit)="console.log('emit aip-submit')"
    (aip-reset)="console.log('emit aip-reset')"
    (aip-submit-success)="console.log('aip-submit-success:', $event.detail)"
    (aip-submit-error)="console.log('aip-submit-error:', $event.detail)"
  >
    <div class="block">shape=dot 单选按钮，disable 某个选项</div>
    <div class="block">
      <aip-radio aip-model="formModel.disabled" value="apple" label="苹果"></aip-radio>
      <aip-radio aip-model="formModel.disabled" value="orange" label="橘子"></aip-radio>
      <aip-radio aip-model="formModel.disabled" value="banana" label="香蕉"></aip-radio>
      <aip-radio aip-model="formModel.disabled" value="watermelon" label="西瓜"></aip-radio>
    </div>
    <div class="block"><span style="color: rgba(255, 2, 1)">*</span>shape=dot 单选按钮，必填</div>
    <div class="block" style="display: flex; justify-content: space-between">
      <aip-radio
        aip-model="formModel.radio"
        value="apple"
        label="苹果"
        required
        [disabled]="formModel.disabled.value === 'apple'"
      ></aip-radio>
      <aip-radio
        aip-model="formModel.radio"
        value="orange"
        label="橘子"
        required
        [disabled]="formModel.disabled.value === 'orange'"
      ></aip-radio>
      <aip-radio
        aip-model="formModel.radio"
        value="banana"
        label="香蕉"
        required
        [disabled]="formModel.disabled.value === 'banana'"
      ></aip-radio>
      <aip-radio
        aip-model="formModel.radio"
        value="watermelon"
        label="西瓜"
        [disabled]="formModel.disabled.value === 'watermelon'"
        required
      ></aip-radio>
    </div>
    <div class="block block-validate" aip-if="formModel.radio.validationMessage">
      默认错误提示：{{formModel.radio.validationMessage}}
    </div>
    </div>
    <div class="block" style="display: flex; align-items: center; padding-bottom: 20px">
      <aip-button
        width="200"
        height="60"
        type="submit"
        btn_style="margin-right: 10px;border:0;padding:15px;border-radius:20px;"
        >submit</aip-button
      >
      <aip-button
        width="200"
        height="60"
        type="reset"
        (click)="formModel=formModelInit"
        btn_style="margin-right: 10px;border:0;padding:15px;border-radius:20px;"
        >reset</aip-button
      >
    </div>
  </aip-form>
</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

引入

<script
    defer
    src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip-ui/dist/aip-radio/aip-radio.iife.js"
></script>

1
2
3
4

支持属性

属性名称	类型	默认值	必填	说明
value	string	''	是	单选按钮的值
checked	string	`'{value: ""}'`	否	这是一个对象 stringify 之后的字符串，value 表示选中按钮的值，还有校验结果也会塞到这个对象里
required	boolean	false	否	单选按钮的必填校验属性，值为 `true` 时必须填写内容
disabled	boolean	false	否	单选按钮的禁用属性，值为 `true` 被禁用
label	string	''	否	单选按钮内部 label 的文案
label-style	string	''	否	内部 label 文案样式
label-disabled-style	string	''	否	内部 label 文案样式（禁用状态）
checker-style	string	''	否	外部框框的样式
checker-checked-style	string	''	否	外部框框的样式（选中状态）
icon-size	string	''	否	内部 icon 的大小

校验返回的错误类型

valueMissing: boolean，输入值是否必填校验
valid: boolean，所有格式校验是否通过

支持事件

事件名称	说明
change	当单选按钮值发生变化

# 单选（aip-radio）

# 示例

# 引入

# 支持属性

# 校验返回的错误类型

# 支持事件

单选（aip-radio）

示例

引入

支持属性

校验返回的错误类型

支持事件