Skip to content
This repository has been archived by the owner on Jun 3, 2021. It is now read-only.

Latest commit

 

History

History
156 lines (145 loc) · 4.4 KB

File metadata and controls

156 lines (145 loc) · 4.4 KB

wxc-grid-select

Grid selection component supports single and multiple choice

Code Example

<template>
  <wxc-grid-select
    :single="true"
    :cols="5"
    :customStyles="customStyles"
    :list="testData1"
    @select="params => onSelect('res3', params)">
  </wxc-grid-select>
  
  <wxc-grid-select
    :limit="5"
    :list="testData2"
    @overLimit="onOverLimit"
    @select="params => onSelect('res3', params)">
  </wxc-grid-select>
</template>
<script>
  import { WxcGridSelect } from 'weex-ui';
  export default {
    components: { WxcGridSelect },
    data: () => ({
      customStyles: {
        lineSpacing: '14px',
        width: '120px',
        height: '50px',
        icon: '',
        color: '#333333',
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#666666',
        checkedBorderColor: '#ffb200',
        backgroundColor: '#ffffff',
        checkedBackgroundColor: '#ffb200'
      },
      testData1: [
        {
          'title': 'shanghai'
        },
        {
          'title': 'hangzhou',
          'checked': true
        },
        {
          'title': 'beijing'
        },
        {
          'title': 'guangzhou'
        },
        {
          'title': 'shengzhen'
        },
        {
          'title': 'nanjin'
        }
      ],
      testData2: [
        {
          'title': 'shanghai'
        },
        {
          'title': 'hangzhou',
          'checked': true
        },
        {
          'title': 'beijing',
          'checked': true
        },
        {
          'title': 'guangzhou'
        },
        {
          'title': 'shengzhen'
        },
        {
          'title': 'nanjing'
        }
      ]
    }),
    methods: {
      onSelect (res, {selectIndex, checked, checkedList}) {
        Vue.set(this, res, `checked index:${selectIndex}${checked ? 'yes' : 'no'}\n checked list:${checkedList.map(item => item.title).join(',')}`);
      },
      onOverLimit (limit) {
        modal.toast({
          message: `${limit}`,
          duration: 0.8
        });
      }
    }
  }
</script>

More details can be found in here

Props

Prop Type Required Default Description
list Array Y - config data list
list[{title}] String N '' title
list[{checked}] Boolean N false whether is checked
list[{disabled}] Boolean N false whether is been disabled
single Boolean N false whether is single choice
limit Number N - maximum number of choices
cols Number Y 4 cols
customStyles Object N {} custom styles
customStyles{lineSpacing} String N 12px lineSpacing
customStyles{width} String N 166px item width
customStyles{height} String N 72px item height
customStyles{color} String N #3d3d3d text color
customStyles{checkedColor} String N #3d3d3d checked text color
customStyles{disabledColor} String N #9b9b9b disabled text Color
customStyles{borderColor} String N transparent border color
customStyles{checkedBorderColor} String N #ffb200 checked border color
customStyles{disabledBorderColor} String N transparent disabled border color
customStyles{backgroundColor} String N #f6f6f6 background color
customStyles{checkedBackgroundColor} String N #ffffff checked background color
customStyles{disabledBackgroundColor} String N #f6f6f6 disabled background color
customStyles{icon} String N x icon when checked

Events

select

  • data:
    {
      selectIndex:1
      checked: true
      checkedList:[1,2,3,4]
    }
  • demo:
    <wxc-grid-select @select="onSelect"></wxc-grid-select>

overLimit

  • data:
    arg1: limit count
    
  • demo:
    <wxc-grid-select @overLimit="onOverLimit"></wxc-grid-select>