# bugking7-flowview-demo

**Repository Path**: bugking7_uniapp_plug/bugking7-flowview-demo

## Basic Information

- **Project Name**: bugking7-flowview-demo
- **Description**: 流式布局，适用搜索记录、标签等场景
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-22
- **Last Updated**: 2022-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 流式布局，适用搜索记录、标签等场景

## 简介

搜索记录或标签类的组件很常见，大部分应用都会运用到类似的场景。本组件带你快速实现流式布局，快来看看吧。

## 属性介绍

| 属性名              | 类型     | 默认值    | 必填 | 说明                                                         |
| ------------------- | -------- | --------- | ---- | ------------------------------------------------------------ |
| `flowOptions`       | `Object` | 空        | 是   | 流式布局的基本属性，包含以下属性：                           |
| `flowList`          | `Array`  | 空        | 是   | 流式布局展示的数据数组。包含两种数据类型：1、`String`类型数组。2、`Obj`类型数组。 |
| `flowItemValue`     | `String` | 空        | 否   | 流式布局`Item`展示数据的参数名。1、当`flowList`为`String`类型时，可不填或''。2、当`flowList`为Obj类型时，必填，值为`Obj`展示到流式布局的属性名。 |
| `flowItemBgColor`   | `String` | `#868686` | 否   | 流式布局`Item`背景色。                                       |
| `flowItemTextColor` | `String` | `#ffffff` | 否   | 流式布局`Item`字体颜色。                                     |
| `flowItemTextSize`  | `String` | 13        | 否   | 流式布局`Item`字体大小，单位`px`。                           |
| `flowItemMargin`    | `String` | 5         | 否   | 流式布局`Item`外边距，单位`px`。                             |
| `flowItemRadius`    | `String` | 0         | 否   | 流式布局圆角弧度。为0时=直角矩形，不为0时=圆角矩形。         |

## 事件介绍

| 事件名               | 说明                                                         |
| -------------------- | ------------------------------------------------------------ |
| `@flowItemClickBack` | 流式布局`Item`点击事件回调。回调值`event:{clickIndex:index}`,`clickIndex`为流式布局`Item`下标。 |

## 使用示例

```js
<view class="container">
		<bugking7-flow-view 
		:flowOptions="flowOptions" 
		@flowItemClickBack="handleItemClick">
		</bugking7-flow-view>
</view>

data() {
    return {
        flowOptions:{
            flowList:[
                // {   // 为Obj类型
                // 	type:'',
                // 	name:'Android'
                // },
                'Android','IOS','JS','Kotin','Go', //为String类型
                'Curl','Dart','DiBOL','Etoys','Fancy',
                'Gosu','Haskell','Ioke','Ioke','Limbo',
                'Magic','Mathematica','Mirah','MS-DOS Batch','PowerShell'
            ],
            flowItemValue：'',//String类型可不填或空 Obj类型时必填，以上为例，填name
            flowItemMargin:'5',
            flowItemRadius:'8'
        }
    }
},
    
methods: {
    handleItemClick(e){//item点击事件回调
        console.log(e)//{clickIndex: 18}
    }
}
```