AIP

选择器（aip-picker）

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

示例

<div
    style="padding: 10px"
    aip-state="{
                range: ['apple', 'orange', 'banana', 'watermelon'],
                range1: [{value: 'apple'}, {value: 'orange'},{value: 'banana'},{value: 'watermelon'}],
                range2: [{value: 'apple', label: '苹果'}, {value: 'orange', label:'橘子'},{value: 'banana', label: '香蕉'},{value: 'watermelon',label: '西瓜'}],
                formModel: {
                    disabled: { value: 'orange'},
                    picker: {value: 'apple'},
                    picker1: {value: ''},
                    picker2: {value: 'apple'},
                    picker3: {value: 'apple'},
                    picker4: {value: 'apple'},
                },
                formModelInit: {
                    disabled: { value: ''},
                    picker: {value: ''},
                    picker1: {value: ''},
                    picker2: {value: ''},
                    picker3: {value: ''},
                    picker4: {value: ''},
                },
                rangeInit: ['pomelo', 'apple', 'orange', 'banana', 'watermelon'],
            }"
>
    <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">disable 选择器，disable === 'apple' 禁用 picker 选择器</div>
        <div
            class="block"
            style="display: flex; junstify-content: center; align-items: center"
        >
            <aip-picker [range]="range" [(value)]="formModel.disabled">
                <aip-button
                    width="200"
                    height="60"
                    btn_style="margin-right: 10px;border:0;padding:15px;border-radius:20px;"
                    >picker</aip-button
                >
            </aip-picker>
            <div>你选择的值：{{formModel.disabled.value}}</div>
        </div>
        <div class="block">picker 选择器：{{formModel.picker.value}}</div>
        <div class="block">
            <aip-picker
                title="水果"
                [range]="range1"
                [(value)]="formModel.picker"
                [disabled]="formModel.disabled.value === 'apple'"
            >
                <aip-button
                    width="200"
                    height="60"
                    text-style="color: #fff"
                    content="picker"
                    btn_style="background-color:#165dff;border:0;padding:15px;border-radius:20px;"
                    btn_disabled_style="background-color:rgb(148, 191, 255);"
                    [disabled]="formModel.disabled.value === 'apple'"
                ></aip-button>
            </aip-picker>
        </div>
        <div class="block">picker1 选择器(required)：{{formModel.picker1.value}}</div>
        <div class="block">
            <aip-picker
                title="水果"
                [range]="range2"
                [(value)]="formModel.picker1"
                required
            >
                <aip-button
                    width="200"
                    height="60"
                    text-style="color: #fff"
                    content="picker1"
                    btn_style="background-color:#165dff;border:0;padding:15px;border-radius:20px;"
                    btn_disabled_style="background-color:rgb(148, 191, 255);"
                ></aip-button>
            </aip-picker>
        </div>
        <div
            class="block block-validate"
            aip-if="formModel.picker1 && formModel.picker1.validationMessage"
        >
            picker1 选择器错误：{{formModel.picker1.validationMessage}}
        </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)="range=rangeInit"
                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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

引入

<script
    defer
    src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip-ui/dist/aip-picker/aip-picker.iife.js"
></script>
1
2
3
4

支持属性

属性名称类型默认值必填说明
valuestring'{ value: "" }'否这是一个对象 stringify 之后的字符串，value 表示选择器的值，还有校验结果也会塞到这个对象里
rangearray[]否指定 picker 列表中的待选数据
range-keystring'value'否指定显示在 picker 列表中的内容的实际值，其值为对象数组的 key。当且仅当 range 为对象数组时有效
label-keystring'lable'｜'value'否指定显示在 picker 列表中的内容的显示值，其值为对象数组的 key。当且仅当 range 为对象数组时有效。
requiredbooleanfalse否选择器的必填校验属性，值为 true 时，选择器必须选择一项内容
disabledbooleanfalse否选择器的禁用属性，值为 true 时，选择器被禁用
confirm-stringstring''否“确认”按钮显示的文字
cancel-stringstring''否“取消”按钮显示的文字
confirm-colorstring''否“确认”按钮的文字颜色
cancel-colorstring''否“取消”按钮的文字颜色
titlestring''否标题文字
title-colorstring''否标题文字颜色
title-font-sizestring''否标题文字大小

校验返回的错误类型

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

支持事件

事件名称说明
change当多选按钮值发生变化
Last Updated: 2022/7/15 下午7:22:06