wxc-grid-select

Weex 网格形选择组件，支持单选、多选

Demo

使用方法

  1. <template>
    2.   <wxc-grid-select
    3.     :single="true"
    4.     :cols="5"
    5.     :customStyles="customStyles"
    6.     :list="testData1"
    7.     @select="params => onSelect('res3', params)">
    8.   </wxc-grid-select>
    9.   10.   <wxc-grid-select
    11.     :limit="5"
    12.     :list="testData2"
    13.     @overLimit="onOverLimit"
    14.     @select="params => onSelect('res3', params)">
    15.   </wxc-grid-select>
    16. </template>
    17. <script>
    18.   import { WxcGridSelect } from 'weex-ui';
    19.   export default {
    20.     components: { WxcGridSelect },
    21.     data: () => ({
    22.       customStyles: {
    23.         lineSpacing: '14px',
    24.         width: '120px',
    25.         height: '50px',
    26.         icon: '',
    27.         color: '#333333',
    28.         checkedColor: '#ffffff',
    29.         disabledColor: '#eeeeee',
    30.         borderColor: '#666666',
    31.         checkedBorderColor: '#ffb200',
    32.         backgroundColor: '#ffffff',
    33.         checkedBackgroundColor: '#ffb200'
    34.       },
    35.       testData1: [
    36.         {
    37.           'title': '上海'
    38.         },
    39.         {
    40.           'title': '杭州',
    41.           'checked': true
    42.         },
    43.         {
    44.           'title': '北京'
    45.         },
    46.         {
    47.           'title': '广州'
    48.         },
    49.         {
    50.           'title': '深圳'
    51.         },
    52.         {
    53.           'title': '南京'
    54.         }
    55.       ],
    56.       testData2: [
    57.         {
    58.           'title': '上海'
    59.         },
    60.         {
    61.           'title': '杭州',
    62.           'checked': true
    63.         },
    64.         {
    65.           'title': '北京',
    66.           'checked': true
    67.         },
    68.         {
    69.           'title': '广州'
    70.         },
    71.         {
    72.           'title': '深圳'
    73.         },
    74.         {
    75.           'title': '南京'
    76.         }
    77.       ]
    78.     }),
    79.     methods: {
    80.       onSelect (res, {selectIndex, checked, checkedList}) {
    81.         Vue.set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked ? '是' : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
    82.       },
    83.       onOverLimit (limit) {
    84.         modal.toast({
    85.           message: `最多选择${limit}个`,
    86.           duration: 0.8
    87.         });
    88.       }
    89.     }
    90.   }
    91. </script>Click to copy

更详细代码可以参考 demo

Props

overLimit * 描述: 监听选择数量溢出事件 * 参数:
arg1: 限制的选择数量Click to copy * 示例:
@overlimit="onOverLimit">Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-grid-select/