mip-city-selection 城市选择组件

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

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

示例

基本用法

1、本地数据

按照如下示例配置城市数据。

  1. <!--  <mip-test id="cityTest"></mip-test> 测试组件，模拟接收事件 -->
  2. <mip-city-selection class="mip-hidden" on="citySelected">
  3. <!-- <mip-city-selection class="mip-hidden" on="citySelected:cityTest.print" data-src="http://172.24.138.98:8888/xxxxtest.json"> -->
  4.   <script type="application/json">
  5.     {
  6.       "list": [{
  7.         "key": "热门",
  8.         "cities": [{
  9.             "city": "北京",
  10.             "pinyin": "beijing",
  11.             "code": "1"
  12.           },
  13.           {
  14.             "city": "上海",
  15.             "pinyin": "shanghai",
  16.             "code": "2"
  17.           },
  18.           {
  19.             "city": "广州",
  20.             "pinyin": "guangzhou",
  21.             "code": "3"
  22.           },
  23.           {
  24.             "city": "深圳",
  25.             "pinyin": "shenzhen",
  26.             "code": "4"
  27.           },
  28.           {
  29.             "city": "重庆",
  30.             "pinyin": "chongqing",
  31.             "code": "5"
  32.           }
  33.         ]
  34.       }, {
  35.         "key": "A",
  36.         "cities": [{
  37.             "city": "澳门",
  38.             "pinyin": "aomen",
  39.             "code": "7"
  40.           },
  41.           {
  42.             "city": "安庆",
  43.             "pinyin": "anqing",
  44.             "code": "8"
  45.           },
  46.           {
  47.             "city": "安泽",
  48.             "pinyin": "anze",
  49.             "code": "9"
  50.           }
  51.         ]
  52.       }, {
  53.         "key": "B",
  54.         "cities": [{
  55.             "city": "宝清",
  56.             "pinyin": "baoqing",
  57.             "code": "10"
  58.           },
  59.           {
  60.             "city": "宝鸡",
  61.             "pinyin": "baoji",
  62.             "code": "11"
  63.           },
  64.           {
  65.             "city": "巴东",
  66.             "pinyin": "badong",
  67.             "code": "12"
  68.           }
  69.         ]
  70.       }, {
  71.         "key": "C",
  72.         "cities": [{
  73.             "city": "重庆",
  74.             "pinyin": "chongqing",
  75.             "code": "13"
  76.           },
  77.           {
  78.             "city": "成都",
  79.             "pinyin": "chengdu",
  80.             "code": "14"
  81.           },
  82.           {
  83.             "city": "苍山",
  84.             "pinyin": "cangshan",
  85.             "code": "15"
  86.           }
  87.         ]
  88.       }, {
  89.         "key": "D",
  90.         "cities": [{
  91.             "city": "大庆",
  92.             "pinyin": "daqing",
  93.             "code": "16"
  94.           },
  95.           {
  96.             "city": "大理",
  97.             "pinyin": "dali",
  98.             "code": "17"
  99.           },
  100.           {
  101.             "city": "东莞",
  102.             "pinyin": "dongguan",
  103.             "code": "18"
  104.           }
  105.         ]
  106.       }, {
  107.         "key": "E",
  108.         "cities": [{
  109.             "city": "鄂尔多斯",
  110.             "pinyin": "eerduosi",
  111.             "code": "19"
  112.           },
  113.           {
  114.             "city": "峨眉山",
  115.             "pinyin": "emeishan",
  116.             "code": "20"
  117.           }
  118.         ]
  119.       }, {
  120.         "key": "F",
  121.         "cities": [{
  122.             "city": "阜阳",
  123.             "pinyin": "fuyang",
  124.             "code": "21"
  125.           },
  126.           {
  127.             "city": "福州",
  128.             "pinyin": "fuzhou",
  129.             "code": "22"
  130.           },
  131.           {
  132.             "city": "防城港",
  133.             "pinyin": "fangchenggang",
  134.             "code": "23"
  135.           }
  136.         ]
  137.       },
  138.         {
  139.         "key": "F",
  140.         "cities": [{
  141.             "city": "阜阳",
  142.             "pinyin": "fuyang",
  143.             "code": "21"
  144.           },
  145.           {
  146.             "city": "福州",
  147.             "pinyin": "fuzhou",
  148.             "code": "22"
  149.           },
  150.           {
  151.             "city": "防城港",
  152.             "pinyin": "fangchenggang",
  153.             "code": "23"
  154.           }
  155.         ]
  156.       },
  157.       {
  158.         "key": "F",
  159.         "cities": [{
  160.             "city": "阜阳",
  161.             "pinyin": "fuyang",
  162.             "code": "21"
  163.           },
  164.           {
  165.             "city": "福州",
  166.             "pinyin": "fuzhou",
  167.             "code": "22"
  168.           },
  169.           {
  170.             "city": "防城港",
  171.             "pinyin": "fangchenggang",
  172.             "code": "23"
  173.           }
  174.         ]
  175.       },
  176.       {
  177.         "key": "F",
  178.         "cities": [{
  179.             "city": "阜阳",
  180.             "pinyin": "fuyang",
  181.             "code": "21"
  182.           },
  183.           {
  184.             "city": "福州",
  185.             "pinyin": "fuzhou",
  186.             "code": "22"
  187.           },
  188.           {
  189.             "city": "防城港",
  190.             "pinyin": "fangchenggang",
  191.             "code": "23"
  192.           }
  193.         ]
  194.       },
  195.       {
  196.         "key": "G",
  197.         "cities": [{
  198.             "city": "广州",
  199.             "pinyin": "guangzhou",
  200.             "code": "24"
  201.           },
  202.           {
  203.             "city": "贵阳",
  204.             "pinyin": "guiyang",
  205.             "code": "25"
  206.           }
  207.         ]
  208.       }]
  209.     }
  210.   </script>
  211. </mip-city-selection>

查看例子编辑示例

2、异步传入数据

按照如下示例配置城市数据。

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

  1. <!--  <mip-test id="cityTest"></mip-test> 测试组件，模拟接收事件 -->
  2. <mip-city-selection class="mip-hidden" data-src="https://xxx/cities.json"  on="citySelected:cityTest.print">
  3.     <!--存在 data-src 时，本地数据配置不生效-->
  4. </mip-city-selection>

查看例子编辑示例

抛出事件

ready

每次触发抛事件后，抛出mip-city-selection的citySelected事件，并传json数据

格式 如 { "city": "鄂尔多斯", "pinyin": "eerduosi", "code": "19"}

组件间通信请看文档 https://www.mipengine.org/doc/3-widget/6-help/3-mip-normal.html

属性说明

data-src

说明：用于指向远程数据地址，异步加载并渲染。指明data-src后，配置在<script type="application/json">本地的数据不再生效。 使用限制：异步加载数据属于前后端交互请求。由于 MIP-Cache 为 HTTPS 环境，data-src 要求支持 HTTPS.

原文: https://www.mipengine.org/v2/components/presentation/mip-city-selection.html