mip-group-selection 分组选择

mip-group-selection 分组选择组件,可用于城市分组,英文名分组,颜色分组等。

标题内容
类型通用
支持布局responsive,fixed-height,fill,container,fixed
所需脚本https://c.mipcdn.com/static/v2/mip-group-selection/mip-group-selection.js
https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js

示例

基本用法

按照如下示例配置城市数据(使用本地数据)。

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
<mip-group-selection class="mip-hidden"> <!-- 在 application/json 中配置全部城市 --> <script type="application/json"> { "list": [{ "key": "热门", "cities": [ { "city": "北京", "pinyin": "beijing", "code": "1" }, { "city": "上海", "pinyin": "shanghai", "code": "2" }, { "city": "广州", "pinyin": "guangzhou", "code": "3" }, { "city": "深圳", "pinyin": "shenzhen", "code": "4" }, { "city": "重庆", "pinyin": "chongqing", "code": "5" } ] }, { "key": "A", "cities": [ { "city": "澳门", "pinyin": "aomen", "code": "7" }, { "city": "安庆", "pinyin": "anqing", "code": "8" }, { "city": "安泽", "pinyin": "anze", "code": "9" } ] }, { "key": "B", "cities": [ { "city": "宝清", "pinyin": "baoqing", "code": "10" }, { "city": "宝鸡", "pinyin": "baoji", "code": "11" }, { "city": "巴东", "pinyin": "badong", "code": "12" } ] }, { "key": "C", "cities": [ { "city": "重庆", "pinyin": "chongqing", "code": "13" }, { "city": "成都", "pinyin": "chengdu", "code": "14" }, { "city": "苍山", "pinyin": "cangshan", "code": "15" } ] }, { "key": "D", "cities": [ { "city": "大庆", "pinyin": "daqing", "code": "16" }, { "city": "大理", "pinyin": "dali", "code": "17" }, { "city": "东莞", "pinyin": "dongguan", "code": "18" } ] }, { "key": "E", "cities": [ { "city": "鄂尔多斯", "pinyin": "eerduosi", "code": "19" }, { "city": "峨眉山", "pinyin": "emeishan", "code": "20" } ] }, { "key": "F", "cities": [ { "city": "阜阳", "pinyin": "fuyang", "code": "21" }, { "city": "福州", "pinyin": "fuzhou", "code": "22" }, { "city": "防城港", "pinyin": "fangchenggang", "code": "23" } ] }, { "key": "G", "cities": [ { "city": "广州", "pinyin": "guangzhou", "code": "24" }, { "city": "贵阳", "pinyin": "guiyang", "code": "25" } ] }] } </script> <!-- 城市选择组件依赖的 DOM 结构,不建议自行删除结构 --> <div class="mip-group-selection-wrapper"> <template type="mip-mustache"> <div class="mip-group-selection-content"> {{#list}} <div class="mip-group-selection-group mip-group-selection-part-letter"> <div class="mip-group-selection-title" data-anchor="{{key}}">{{key}}</div> {{#cities}} <a class="mip-group-selection-item" href="#" data-code="{{code}}" data-pinyin="{{pinyin}}">{{city}}</a> {{/cities}} </div> {{/list}} </div> <mip-fixed class="mip-group-selection-sidebar-wrapper"> <div class="mip-group-selection-sidebar"> {{#list}} <div class="mip-group-selection-item" data-target-anchor="{{key}}">{{key}}</div> {{/list}} </div> </mip-fixed> </template> </div> </mip-group-selection> <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>

基本用法

按照如下示例配置城市数据(使用远程数据)。

注意:data-src属于前后端交互请求。由于 MIP-Cache 为 HTTPs 环境,data-src 要求支持 HTTPs.

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
<mip-group-selection class="mip-hidden" data-src="https://xxx/cities.json"> <!--存在 data-src 时,本地数据配置不生效--> <!-- 城市选择组件依赖的 DOM 结构,不建议自行删除结构 --> <div class="mip-group-selection-wrapper"> <template type="mip-mustache"> <div class="mip-group-selection-content"> {{#list}} <div class="mip-group-selection-group mip-group-selection-part-letter"> <div class="mip-group-selection-title" data-anchor="{{key}}">{{key}}</div> {{#cities}} <div class="mip-group-selection-item" data-code="{{code}}" data-pinyin="{{pinyin}}">{{city}}</div> {{/cities}} </div> {{/list}} </div> <mip-fixed class="mip-group-selection-sidebar-wrapper"> <div class="mip-group-selection-sidebar"> {{#list}} <a class="mip-group-selection-link" data-target-anchor="{{key}}">{{key}}</a> {{/list}} </div> </mip-fixed> </template> </div> </mip-group-selection> <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>

配合数据绑定

当选择某个元素,如{ "city": "广州", "pinyin": "guangzhou", "code": "24"}时,页面中数据会发生变化,配合 mip-bind 数据绑定组件 可以将数据显示出来。

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
<h3>这里使用了mip-bind组件</h3> <mip-data> <script type="application/json"> { "code": "", "pinyin": "", "city": "" } </script> </mip-data> <p class="selected-p"> 城市代号:<span m-text="code" class="selected-text"></span>, 城市拼音:<span m-text="pinyin" class="selected-text"></span>, 城市中文:<span m-text="city" class="selected-text"></span> </p> <mip-group-selection class="mip-hidden"> <script type="application/json"> { "list": [{ "key": "热门", "cities": [ { "city": "北京", "pinyin": "beijing", "code": "1" }, { "city": "上海", "pinyin": "shanghai", "code": "2" }, { "city": "广州", "pinyin": "guangzhou", "code": "3" }, { "city": "深圳", "pinyin": "shenzhen", "code": "4" }, { "city": "重庆", "pinyin": "chongqing", "code": "5" } ] }, { "key": "A", "cities": [ { "city": "澳门", "pinyin": "aomen", "code": "7" }, { "city": "安庆", "pinyin": "anqing", "code": "8" }, { "city": "安泽", "pinyin": "anze", "code": "9" } ] }, { "key": "B", "cities": [ { "city": "宝清", "pinyin": "baoqing", "code": "10" }, { "city": "宝鸡", "pinyin": "baoji", "code": "11" }, { "city": "巴东", "pinyin": "badong", "code": "12" } ] }, { "key": "C", "cities": [ { "city": "重庆", "pinyin": "chongqing", "code": "13" }, { "city": "成都", "pinyin": "chengdu", "code": "14" }, { "city": "苍山", "pinyin": "cangshan", "code": "15" } ] }, { "key": "D", "cities": [ { "city": "大庆", "pinyin": "daqing", "code": "16" }, { "city": "大理", "pinyin": "dali", "code": "17" }, { "city": "东莞", "pinyin": "dongguan", "code": "18" } ] }, { "key": "E", "cities": [ { "city": "鄂尔多斯", "pinyin": "eerduosi", "code": "19" }, { "city": "峨眉山", "pinyin": "emeishan", "code": "20" } ] }, { "key": "F", "cities": [ { "city": "阜阳", "pinyin": "fuyang", "code": "21" }, { "city": "福州", "pinyin": "fuzhou", "code": "22" }, { "city": "防城港", "pinyin": "fangchenggang", "code": "23" } ] }, { "key": "G", "cities": [ { "city": "广州", "pinyin": "guangzhou", "code": "24" }, { "city": "贵阳", "pinyin": "guiyang", "code": "25" } ] }] } </script> <div class="mip-group-selection-wrapper"> <template type="mip-mustache"> <div class="mip-group-selection-content"> {{#list}} <div class="mip-group-selection-group mip-group-selection-part-letter"> <div class="mip-group-selection-title" data-anchor="{{key}}">{{key}}</div> {{#cities}} <div class="mip-group-selection-item" data-code="{{code}}" data-pinyin="{{pinyin}}">{{city}}</div> {{/cities}} </div> {{/list}} </div> <mip-fixed class="mip-group-selection-sidebar-wrapper"> <div class="mip-group-selection-sidebar"> {{#list}} <a class="mip-group-selection-link" data-target-anchor="{{key}}">{{key}}</a> {{/list}} </div> </mip-fixed> </template> </div> </mip-group-selection> <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>

配合事件绑定

当用户选择某个元素时,分组选择组件会抛出名为 selected 的事件(event),使用组件事件通信机制可以监听这个事件,并与其他组件/数据交互(action)。

如下方示例,当分组选择组件mip-group-selectionselected事件(event)被触发时,调用 id 为mytoggle1组件的toggle作为响应(action)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mip-group-selection class="mip-hidden" on="selected:mytoggle1.toggle" > <!--内容略--> </mip-group-selection> <mip-fixed type="right" bottom="10px"> <mip-toggle id="mytoggle1"> <!--内容略--> </mip-toggle> </mip-fixed> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="/mip-group-selection/mip-group-selection.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-toggle/mip-toggle.js"></script>

属性说明

data-src

说明:用于指向远程数据地址,异步加载并渲染。指明data-src后,配置在<script type="application/json">本地的数据不再生效。

使用限制:异步加载数据属于前后端交互请求。由于 MIP-Cache 为 HTTPs 环境,data-src 要求支持 HTTPs.

注意事项

  • mip-group-selection 分组选择组件依赖mip-fixedmip-mustache,必须引用对应的 javascript 脚本。