GridSelect 多格筛选

利用网格组件可快速布局

注意事项

• 可自定义列的数量，默认为4列
• 网格内可插入图片和文字

效果

使用方法

<template>
  <div class="wxc-demo">
      <lc-title title="多格筛选"></lc-title>

      <category title="单选"></category>

      <div class="demo1">
        <lc-grid-select
          :list="testData1"
          :single="true"
          @select="params => onSelect('res1', params)">
        </lc-grid-select>

        <p class="res">{{res1}}</p>
      </div>

      <category title="多选"></category>

      <div class="demo1">
        <lc-grid-select
          :list="testData2"
          :limit="5"
          @overLimit="onOverLimit"
          @select="params => onSelect('res2', params)">
        </lc-grid-select>

        <p class="res">{{res2}}</p>
      </div>

      <category title="自定义样式"></category>

      <div class="demo1">
        <lc-grid-select
          :single="true"
          :customStyles="customStyles"
          :list="testData3"
          @select="params => onSelect('res3', params)">
        </lc-grid-select>

        <p class="res">{{res3}}</p>
      </div>
  </div>
</template>

<style scoped>
  .wxc-demo {
    background-color: #fff;
    padding-bottom: 30px;
  }

  .scroller {
    flex: 1;
  }

  .demo1 {
    padding-top: 12px;
    /* padding-right: 12px;
    padding-left: 12px; */
  }

  .res {
    color: #666666;
    font-size: 14px; 
    padding: 20px;
    line-height: 18px;
  }
  .grid-select{ padding: 0 10px;}
</style>

<script>

import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
	components: { LcTitle, Category },
    data: () => ({
      res1: '',
      res2: '',
      res3: '',
      testData1: [
        {
          'title': '上海'
        },
        {
          'title': '杭州',
          'checked': true
        },
        {
          'title': '北京'
        },
        {
          'title': '广州'
        },
        {
          'title': '深圳'
        },
        {
          'title': '南京'
        },
        {
          'title': '合肥'
        },
        {
          'title': '武汉'
        },
        {
          'title': '长沙'
        },
        {
          'title': '最多展示两行内容'
        },
        {
          'title': '超过两行文本将被截断展示'
        },
        {
          'title': '西安'
        },
        {
          'title': '郑州'
        },
        {
          'title': '福州'
        }
      ],
      testData2: [
        {
          'title': '上海'
        },
        {
          'title': '杭州',
          'checked': true
        },
        {
          'title': '北京',
          'checked': true
        },
        {
          'title': '广州'
        },
        {
          'title': '深圳'
        },
        {
          'title': '南京'
        },
        {
          'title': '合肥',
          'checked': true
        },
        {
          'title': '武汉',
          'checked': true
        },
        {
          'title': '长沙'
        },
        {
          'title': '南昌'
        },
        {
          'title': '太原'
        },
        {
          'title': '西安'
        },
        {
          'title': '郑州'
        },
        {
          'title': '福州'
        }
      ],
      testData3: [
        {
          'title': '上海'
        },
        {
          'title': '杭州',
          'checked': true
        },
        {
          'title': '北京'
        },
        {
          'title': '广州'
        },
        {
          'title': '深圳'
        },
        {
          'title': '南京'
        },
        {
          'title': '合肥'
        },
        {
          'title': '武汉'
        },
        {
          'title': '长沙'
        },
        {
          'title': '南昌'
        },
        {
          'title': '太原'
        },
        {
          'title': '西安'
        },
        {
          'title': '郑州'
        },
        {
          'title': '福州'
        }
      ],
      customStyles: {
        lineSpacing: '14px',
        height: '25px',
        icon: '',
        color: '#333',
        checkedColor: '#fff',
        disabledColor: '#eee',
        borderColor: '#666',
        checkedBorderColor: '#ffb200',
        backgroundColor: '#fff',
        checkedBackgroundColor: '#ffb200'
      }
    }),
    methods: {
      onSelect (res, { selectIndex, checked, checkedList }) {
        this.$set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked
          ? '是' : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
      },
      onOverLimit (limit) {
        this.$toast.text(`最多选择${limit}个`, { duration:8000 });
      }
    }
  }
</script>

可配置参数

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	-	多选模式下选择数量限制，可以动态更新
customStyles	Object	N	{}	自定义样式
customStyles{lineSpacing}	String	N	12px	行间距
customStyles{width}	String	N	83px	item的宽度
customStyles{height}	String	N	36px	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	#fff	选中状态背景色值
customStyles{disabledBackgroundColor}	String	N	#f6f6f6	不可选状态背景色值
customStyles{icon}	String	N	x	选中状态icon，base64或url，传空则不显示

Events

select

• 描述: 监听选择事件

• 参数:

  {
    selectIndex:本次选择的index
    checked:是否选中
    checkedList:选中列表
  }

• 示例:

  <lc-grid-select @select="onSelect"></lc-grid-select>

overLimit

• 描述: 监听选择数量溢出事件

• 参数:

  arg1: 限制的选择数量

• 示例:

  <lc-grid-select @overLimit="onOverLimit"></lc-grid-select>