开发手册 - 多格筛选(bui-grid-select)

多格筛选 (bui-grid-select)

用法

<bui-grid-select
        :items="testData1"
        :single=true
        @overLimit="onOverLimit"
        @select="_click"></bui-grid-select>
<bui-grid-select
    :items="testData2"
    :limit="3"
    @overLimit="overLimit"
    @select="_click2"></bui-grid-select>
<bui-grid-select
    :cols="5"
    :single=true
    :items="testData3"
    :customStyles="customStyles"
    @select="_click3"></bui-grid-select>

data: function () {
    return {
        testData1: [
            {
                'title': '云应用平台',
                'disabled': true
            },
            {
                'title': '云应用产品',
                'selected': true
            },
            {
                'title': '轨道交通'
            },
            {
                'title': '轨道交通'
            },
            {
                'title': '财政'
            },
            {
                'title': '人力资源'
            },
            {
                'title': '展示一行'
            },
            {
                'title': '超过一行文本将被截断展示'
            },
            {
                'title': '超过一行文本将被截断展示'
            },
            {
                'title': '轨道交通'
            },
        ],
        testData2: [
            {
                'disabled': true,
                'title': '云应用平台'
            },
            {
                'title': '云应用产品',
                'selected': true
            },
            {
                'title': '轨道交通'
            },
            {
                'title': '轨道交通'
            },
            {
                'title': '财政'
            },
            {
                'title': '人力资源'
            },
            {
                'title': '展示一行'
            },
            {
                'title': '超过一行文本将被截断展示'
            },
            {
                'title': '超过一行文本将被截断展示'
            },
            {
                'title': '轨道交通'
            },
        ],
        customStyles: {
            lineSpacing: '20px',
            width: '130px',
            height: '50px',
            icon: '',
            color: '#333333',
            selectedColor: '#ffffff',
            disabledColor: '#eeeeee',
            borderColor: '#e8e8e8',
            selectedBorderColor: '#3399ff',
            backgroundColor: '#ffffff',
            selectedBackgroundColor: '#3399ff'
        },
    }
},
methods: {
    _click(e){
        this.$toast(e.selectedList[0].title);
    },
    _click2(e){
        this.$toast(this.testData2[e.selectIndex].title);
    },
    _click3(e){
        this.$toast(this.testData3[e.selectIndex].title);
    },
    overLimit(e){
        this.$toast(`最多选择${e}个`);
    }
}

Example:bui-grid-select

属性

items: 赋值单选组数据列表，传一个数组，单个数组的属性如下：

• title ：选项文本
• selected ：表明该选项是否为选中, true为选中、false为不选中、默认值为false

customStyles: 自定义属性，传一个对象，属性如下：

• width ：多格筛选单个宽度
• height ：多格筛选单个高度
• color ：正常状态文字色
• selectedColor ：选中状态文字色，默认为#3399ff
• disabledColor ：不可选字体颜色，默认为#9b9b9b
• borderColor ：正常状态边框色，默认为是透明
• selectedBorderColor ：选中状态边框色，默认为#3399ff
• backgroundColor ：正常状态背景色，默认为#f6f6f6
• selectedBackgroundColor ：选中状态背景色 ，默认为#ffffff

事件

• @overLimit:点击某项触发的事件，当超过上限数量时触发的事件，返回上限数量
• @select:点击某项触发的事件，返回索引、当前选项的选择状态、当前索引选项