基于vue、less的vue商品筛选组件，支持多选/单选，默认选中、默认展开/收起、重置、区间范围值筛选

先看效果：

组件使用方式：

      <FilterItem
        label="省份"
        :firstItemText="'全国'"
        :list="areaList"
        @change="changeProvince"
        ref="provinceFilter"
        :open="true"
      />

属性/事件 说明：

    props: {
        label: {//左侧的标题
            type: String,
            required: true
        },
        firstItemText: {//第一项的展示的选项，表示重置、选中全部或者不选
            type: String,
            required: true
        },
        list: {//选项，格式["item"]|[{value:1,label:"a"}]
            type: Array,
            required: true
        },
        multiple: {//是否支持多选
            type: Boolean,
            default: false
        },
        open: {//选项超过一行时默认是否展开
            type: Boolean,
            default: false
        }
    }
    /**
     * 唯一事件：@change，接收当前选中项value，多选模式为英文逗号分隔
     * 如果需要设置默认选中项或重置选项，请通过父组件绑定ref属性，
     * 然后通过refs.CHILD.value = [选项1，选项2...]来改变选项
     * 或refs.CHILD.reset()来清空、重置选项
     * 取值为范围时(如上面薪资)，value定义成json格式，在change事件中parse取相应值
     */

完整组件代码：

<template>
<dl class="filterItem">
    <dt>{
  {label}}：</dt>
    <dd :class="{hasMore: hasMore}" ref="item">
        <template v-if="firstItemText">
            <div class="item" :class="{active: !value.length}" @click="itemClick(firstItemText)">{
  {firstItemText}}</div>
        </template>
        <div v-for="(item, i) of list" :key="i" class="