wxc-grid-select

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

Demo

wxc-grid-select 多格筛选 - 图1wxc-grid-select 多格筛选 - 图2

使用方法

  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>
  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>

更详细代码可以参考 demo

Props

Prop Type Required Default Description
list Array Y - 数据列表，可以动态更新
list[{title}] String N '' 标题
list[{checked}] Boolean N false 是否选中
list[{disabled}] Boolean N false 是否不可选中
single Boolean N false 是否单选模式
limit Number N - 多选模式下选择数量限制，可以动态更新
cols Number Y 4 列数
customStyles Object N {} 自定义样式
customStyles{lineSpacing} String N 12px 行间距
customStyles{width} String N 166px item的宽度
customStyles{height} String N 72px item的高度
customStyles{color} String N #3d3d3d 正常状态文字色值
customStyles{checkedColor} String N #3d3d3d 选中状态文字色值
customStyles{disabledColor} String N #9b9b9b 不可选状态文字色值
customStyles{borderColor} String N transparent 正常状态边框色值
customStyles{checkedBorderColor} String N #ffb200 选中状态边框色值
customStyles{disabledBorderColor} String N transparent 不可选状态边框色值
customStyles{backgroundColor} String N #f6f6f6 正常状态背景色值
customStyles{checkedBackgroundColor} String N #ffffff 选中状态背景色值
customStyles{disabledBackgroundColor} String N #f6f6f6 不可选状态背景色值
customStyles{icon} String N x 选中状态icon，base64或url，传空则不显示

Events

select

  • 描述: 监听选择事件

  • 参数:
    {
    selectIndex:本次选择的index
    checked:是否选中
    checkedList:选中列表
    }Click to copy

  • 示例:
    @select="onSelect">Click to copy

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/