mip-group-selection 分组选择

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

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

示例

基本用法

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

  1. <mip-group-selection class="mip-hidden">
  2.   <!-- 在 application/json 中配置全部城市 -->
  3.   <script type="application/json">
  4.     {
  5.       "list": [{
  6.         "key": "热门",
  7.         "cities": [
  8.           { "city": "北京", "pinyin": "beijing", "code": "1" },
  9.           { "city": "上海", "pinyin": "shanghai", "code": "2" },
  10.           { "city": "广州", "pinyin": "guangzhou", "code": "3" },
  11.           { "city": "深圳", "pinyin": "shenzhen", "code": "4" },
  12.           { "city": "重庆", "pinyin": "chongqing", "code": "5" }
  13.         ]
  14.       }, {
  15.         "key": "A",
  16.         "cities": [
  17.           { "city": "澳门", "pinyin": "aomen", "code": "7" },
  18.           { "city": "安庆", "pinyin": "anqing", "code": "8" },
  19.           { "city": "安泽", "pinyin": "anze", "code": "9" }
  20.         ]
  21.       }, {
  22.         "key": "B",
  23.         "cities": [
  24.           { "city": "宝清", "pinyin": "baoqing", "code": "10" },
  25.           { "city": "宝鸡", "pinyin": "baoji", "code": "11" },
  26.           { "city": "巴东", "pinyin": "badong", "code": "12" }
  27.         ]
  28.       }, {
  29.         "key": "C",
  30.         "cities": [
  31.           { "city": "重庆", "pinyin": "chongqing", "code": "13" },
  32.           { "city": "成都", "pinyin": "chengdu", "code": "14" },
  33.           { "city": "苍山", "pinyin": "cangshan", "code": "15" }
  34.         ]
  35.       }, {
  36.         "key": "D",
  37.         "cities": [
  38.           { "city": "大庆", "pinyin": "daqing", "code": "16" },
  39.           { "city": "大理", "pinyin": "dali", "code": "17" },
  40.           { "city": "东莞", "pinyin": "dongguan", "code": "18" }
  41.         ]
  42.       }, {
  43.         "key": "E",
  44.         "cities": [
  45.           { "city": "鄂尔多斯", "pinyin": "eerduosi", "code": "19" },
  46.           { "city": "峨眉山", "pinyin": "emeishan", "code": "20" }
  47.         ]
  48.       }, {
  49.         "key": "F",
  50.         "cities": [
  51.           { "city": "阜阳", "pinyin": "fuyang", "code": "21" },
  52.           { "city": "福州", "pinyin": "fuzhou", "code": "22" },
  53.           { "city": "防城港", "pinyin": "fangchenggang", "code": "23" }
  54.         ]
  55.       }, {
  56.         "key": "G",
  57.         "cities": [
  58.           { "city": "广州", "pinyin": "guangzhou", "code": "24" },
  59.           { "city": "贵阳", "pinyin": "guiyang", "code": "25" }
  60.         ]
  61.       }]
  62.     }
  63.   </script>
  64.   <!-- 城市选择组件依赖的 DOM 结构，不建议自行删除结构 -->
  65.   <div class="mip-group-selection-wrapper">
  66.     <template type="mip-mustache">
  67.       <div class="mip-group-selection-content">
  68.         {{#list}}
  69.           <div class="mip-group-selection-group mip-group-selection-part-letter">
  70.             <div class="mip-group-selection-title" data-anchor="{{key}}">{{key}}</div>
  71.             {{#cities}}
  72.               <a class="mip-group-selection-item" href="#" data-code="{{code}}" data-pinyin="{{pinyin}}">{{city}}</a>
  73.             {{/cities}}
  74.           </div>
  75.         {{/list}}
  76.       </div>
  77.       <mip-fixed class="mip-group-selection-sidebar-wrapper">
  78.         <div class="mip-group-selection-sidebar">
  79.           {{#list}}
  80.             <div class="mip-group-selection-item" data-target-anchor="{{key}}">{{key}}</div>  
  81.           {{/list}}
  82.           </div>
  83.       </mip-fixed>
  84.     </template>
  85.   </div>
  86. </mip-group-selection>
  87. <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>

基本用法

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

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

  1. <mip-group-selection class="mip-hidden" data-src="https://xxx/cities.json">
  2.   <!--存在 data-src 时，本地数据配置不生效-->
  3.   <!-- 城市选择组件依赖的 DOM 结构，不建议自行删除结构 -->
  4.   <div class="mip-group-selection-wrapper">
  5.     <template type="mip-mustache">
  6.       <div class="mip-group-selection-content">
  7.         {{#list}}
  8.           <div class="mip-group-selection-group mip-group-selection-part-letter">
  9.             <div class="mip-group-selection-title" data-anchor="{{key}}">{{key}}</div>
  10.             {{#cities}}
  11.               <div class="mip-group-selection-item" data-code="{{code}}" data-pinyin="{{pinyin}}">{{city}}</div>
  12.             {{/cities}}
  13.           </div>
  14.         {{/list}}
  15.       </div>
  16.       <mip-fixed class="mip-group-selection-sidebar-wrapper">
  17.         <div class="mip-group-selection-sidebar">
  18.           {{#list}}
  19.             <a class="mip-group-selection-link" data-target-anchor="{{key}}">{{key}}</a>
  20.           {{/list}}
  21.         </div>
  22.       </mip-fixed>
  23.     </template>
  24.   </div>
  25. </mip-group-selection>
  26. <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>

配合数据绑定

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

  1. <h3>这里使用了mip-bind组件</h3>
  2. <mip-data>
  3.   <script type="application/json">
  4.     {
  5.       "code": "",
  6.       "pinyin": "",
  7.       "city": ""
  8.     }
  9.   </script>
  10. </mip-data>
  11. <p class="selected-p">
  12.   城市代号：<span m-text="code" class="selected-text"></span>，
  13.   城市拼音：<span m-text="pinyin" class="selected-text"></span>，
  14.   城市中文：<span m-text="city" class="selected-text"></span>
  15. </p>
  17. <mip-group-selection class="mip-hidden">
  18.   <script type="application/json">
  19.     {
  20.       "list": [{
  21.         "key": "热门",
  22.         "cities": [
  23.           { "city": "北京", "pinyin": "beijing", "code": "1" },
  24.           { "city": "上海", "pinyin": "shanghai", "code": "2" },
  25.           { "city": "广州", "pinyin": "guangzhou", "code": "3" },
  26.           { "city": "深圳", "pinyin": "shenzhen", "code": "4" },
  27.           { "city": "重庆", "pinyin": "chongqing", "code": "5" }
  28.         ]
  29.       }, {
  30.         "key": "A",
  31.         "cities": [
  32.           { "city": "澳门", "pinyin": "aomen", "code": "7" },
  33.           { "city": "安庆", "pinyin": "anqing", "code": "8" },
  34.           { "city": "安泽", "pinyin": "anze", "code": "9" }
  35.         ]
  36.       }, {
  37.         "key": "B",
  38.         "cities": [
  39.           { "city": "宝清", "pinyin": "baoqing", "code": "10" },
  40.           { "city": "宝鸡", "pinyin": "baoji", "code": "11" },
  41.           { "city": "巴东", "pinyin": "badong", "code": "12" }
  42.         ]
  43.       }, {
  44.         "key": "C",
  45.         "cities": [
  46.           { "city": "重庆", "pinyin": "chongqing", "code": "13" },
  47.           { "city": "成都", "pinyin": "chengdu", "code": "14" },
  48.           { "city": "苍山", "pinyin": "cangshan", "code": "15" }
  49.         ]
  50.       }, {
  51.         "key": "D",
  52.         "cities": [
  53.           { "city": "大庆", "pinyin": "daqing", "code": "16" },
  54.           { "city": "大理", "pinyin": "dali", "code": "17" },
  55.           { "city": "东莞", "pinyin": "dongguan", "code": "18" }
  56.         ]
  57.       }, {
  58.         "key": "E",
  59.         "cities": [
  60.           { "city": "鄂尔多斯", "pinyin": "eerduosi", "code": "19" },
  61.           { "city": "峨眉山", "pinyin": "emeishan", "code": "20" }
  62.         ]
  63.       }, {
  64.         "key": "F",
  65.         "cities": [
  66.           { "city": "阜阳", "pinyin": "fuyang", "code": "21" },
  67.           { "city": "福州", "pinyin": "fuzhou", "code": "22" },
  68.           { "city": "防城港", "pinyin": "fangchenggang", "code": "23" }
  69.         ]
  70.       }, {
  71.         "key": "G",
  72.         "cities": [
  73.           { "city": "广州", "pinyin": "guangzhou", "code": "24" },
  74.           { "city": "贵阳", "pinyin": "guiyang", "code": "25" }
  75.         ]
  76.       }]
  77.     }
  78.   </script>
  79.   <div class="mip-group-selection-wrapper">
  80.     <template type="mip-mustache">
  81.       <div class="mip-group-selection-content">
  82.         {{#list}}
  83.           <div class="mip-group-selection-group mip-group-selection-part-letter">
  84.             <div class="mip-group-selection-title" data-anchor="{{key}}">{{key}}</div>
  85.             {{#cities}}
  86.               <div class="mip-group-selection-item" data-code="{{code}}" data-pinyin="{{pinyin}}">{{city}}</div>
  87.             {{/cities}}
  88.           </div>
  89.         {{/list}}
  90.       </div>
  91.       <mip-fixed class="mip-group-selection-sidebar-wrapper">
  92.         <div class="mip-group-selection-sidebar">
  93.           {{#list}}
  94.             <a class="mip-group-selection-link" data-target-anchor="{{key}}">{{key}}</a>
  95.           {{/list}}
  96.         </div>
  97.       </mip-fixed>
  98.     </template>
  99.   </div>
  100. </mip-group-selection>
  101. <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>

配合事件绑定

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

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

  1. <mip-group-selection
  2.   class="mip-hidden"
  3.   on="selected:mytoggle1.toggle"
  4.   >
  5.   <!--内容略-->
  6. </mip-group-selection>
  8. <mip-fixed type="right" bottom="10px">
  9.   <mip-toggle id="mytoggle1">
  10.     <!--内容略-->
  11.   </mip-toggle>
  12. </mip-fixed>
  13. <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
  14. <script src="/mip-group-selection/mip-group-selection.js"></script>
  15. <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>
  16. <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-fixed，mip-mustache，必须引用对应的 javascript 脚本。

原文: https://www.mipengine.org/v2/components/dynamic-content/mip-group-selection.html