• 多格筛选 (bui-grid-select)
    • 用法
    • 属性
    • 事件

    多格筛选 (bui-grid-select)

    多格筛选(bui-grid-select) - 图1   多格筛选(bui-grid-select) - 图2

    用法

    1. <bui-grid-select
    2.         :items="testData1"
    3.         :single=true
    4.         @overLimit="onOverLimit"
    5.         @select="_click"></bui-grid-select>
    6. <bui-grid-select
    7.     :items="testData2"
    8.     :limit="3"
    9.     @overLimit="overLimit"
    10.     @select="_click2"></bui-grid-select>
    11. <bui-grid-select
    12.     :cols="5"
    13.     :single=true
    14.     :items="testData3"
    15.     :customStyles="customStyles"
    16.     @select="_click3"></bui-grid-select>
    1. data: function () {
    2.     return {
    3.         testData1: [
    4.             {
    5.                 'title': '云应用平台',
    6.                 'disabled': true
    7.             },
    8.             {
    9.                 'title': '云应用产品',
    10.                 'selected': true
    11.             },
    12.             {
    13.                 'title': '轨道交通'
    14.             },
    15.             {
    16.                 'title': '轨道交通'
    17.             },
    18.             {
    19.                 'title': '财政'
    20.             },
    21.             {
    22.                 'title': '人力资源'
    23.             },
    24.             {
    25.                 'title': '展示一行'
    26.             },
    27.             {
    28.                 'title': '超过一行文本将被截断展示'
    29.             },
    30.             {
    31.                 'title': '超过一行文本将被截断展示'
    32.             },
    33.             {
    34.                 'title': '轨道交通'
    35.             },
    36.         ],
    37.         testData2: [
    38.             {
    39.                 'disabled': true,
    40.                 'title': '云应用平台'
    41.             },
    42.             {
    43.                 'title': '云应用产品',
    44.                 'selected': true
    45.             },
    46.             {
    47.                 'title': '轨道交通'
    48.             },
    49.             {
    50.                 'title': '轨道交通'
    51.             },
    52.             {
    53.                 'title': '财政'
    54.             },
    55.             {
    56.                 'title': '人力资源'
    57.             },
    58.             {
    59.                 'title': '展示一行'
    60.             },
    61.             {
    62.                 'title': '超过一行文本将被截断展示'
    63.             },
    64.             {
    65.                 'title': '超过一行文本将被截断展示'
    66.             },
    67.             {
    68.                 'title': '轨道交通'
    69.             },
    70.         ],
    71.         customStyles: {
    72.             lineSpacing: '20px',
    73.             width: '130px',
    74.             height: '50px',
    75.             icon: '',
    76.             color: '#333333',
    77.             selectedColor: '#ffffff',
    78.             disabledColor: '#eeeeee',
    79.             borderColor: '#e8e8e8',
    80.             selectedBorderColor: '#3399ff',
    81.             backgroundColor: '#ffffff',
    82.             selectedBackgroundColor: '#3399ff'
    83.         },
    84.     }
    85. },
    86. methods: {
    87.     _click(e){
    88.         this.$toast(e.selectedList[0].title);
    89.     },
    90.     _click2(e){
    91.         this.$toast(this.testData2[e.selectIndex].title);
    92.     },
    93.     _click3(e){
    94.         this.$toast(this.testData3[e.selectIndex].title);
    95.     },
    96.     overLimit(e){
    97.         this.$toast(`最多选择${e}个`);
    98.     }
    99. }

    Example:bui-grid-select

    属性

    Prop Type Required Default Description
    items array Y 多格筛选数据项
    single boolean N false 单项选择
    limit number N 多项选择时的选择项的上限个数
    cols string``number N 4 列数
    customStyles object N 自定义属性

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

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

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

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

    事件

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