## 系统组件

[TOC]



### 上传文件组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-upload');?>
<!--例如-->
<com-upload accept="" disabled="" multiple="" max="" params="" fields="" @start="" @success="" @complete="">
</com-upload>
<!--属性及方法说明-->
accept:用逗号隔开的 MIME 类型列表，如：accept="image/gif, image/jpeg"或accept="image/*"
disabled:是否禁用上传，如：disabled=true
multiple:是否支持多文件上传，如：multiple=false
max:支持上传文件最大数量，如：max=2
params:上传时携带的请求参数，如：params={user_id:123}
fields:文件上传表单追加的字段，如：fields={username:'abc'}
@start:文件开始上传触发
@success:当文件上传完成时触发
@complete:当所有文件上传完成时触发
```
### 单图片预览组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-image');?>
<!--例如-->
<com-image mode="" src="" width="" height="" radius=""></com-image>
<!--属性及方法说明-->
src: "图片路径", 如：srct="/images/tup.jpg"
mode:"图片的模式" 如：mode=“scaleToFill” 表示百分%展示
radius:圆角（单位是%）：如：radius="5"
height:图高, 如：height="300px"
width:图宽 如：width="300px"
```
### 多图图片预览组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-gallery');?>
<!--例如-->
<com-gallery url="" show-delete=""  width="" height="" @deleted="">
<!--属性及方法说明-->
list: "图片列表", 如 list=[]
urlKey:"图片集合的键值" 如：urlKey=“2” 
url: "链接",如：url="/images/tup.jpg"
height:图高, 如：height="300px"
width:图宽 如：width="300px"
showDelete:是否显示 如：show-delete="true"
@deleted：删除时触发
```
### 选择文件按钮组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-attachment');?>
<!--例如-->
<com-attachment multiple="true" max="6" @selected="picUrl"></>
<!--属性及方法说明-->
display: "通过css控制是否显示", 如display="inline-block"
title: "标题",如title="请选择对应图片"
multiple: 是否支持多选,Boolean。
max: "最多可以选择多少张图", 如max="6"
params: 传入参数一起发送请求,
simple: 是否使用系统封装的图片，Boolean,
type: 文件类型,
value: 设置选中的值,
openDialog: 是否显示,
```
### 选择文件按钮组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-attachment');?>
<!--例如-->
<com-attachment multiple="true" max="6" @selected="picUrl"></com-attachment>
<!--属性及方法说明-->
display: "通过css控制是否显示", 如display="inline-block"
title: "标题",如title="请选择对应图片"
multiple: Boolean,
max: "最多可以选择多少张图", 如max="6"
params: 传参数,
simple: ,
type: 类型,如 type = 'images',
value: ,
openDialog: ,
```
### 数字统计组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-count-up');?>
<!--例如-->
<com-count-up count="" end_datetime=""></com-count-up>
<!--属性及方法说明-->
count:"显示的数字"，如：count="54"
end_datetime:"截止时间" 如：lat="2020-01-01 08:00:00"
```
### 选择商品组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-dialog-select');?>
<!--例如-->
 <com-dialog-select multiple=""  title="" @selected="" @input=""></com-dialog-select>
<!--属性及方法说明-->
url:"获取商品链接",有默认值, 如：url="mall/goods/index"
multiple: 是否开启选 Boolean,
title: "标题",
listKey:键值,
params: 请求,Object,
display: 是否显示(预留字段)：Boolean,
extraSearch: 搜索结果(预留字段)，Object,
@selected:选择完成后触发
@input:
```
### 省市区选择

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-district');?>
<!--例如-->
 <com-district rule="" edit="" level="" @selected=""></com-district>
<!--属性及方法说明-->
detail:传入的所有省市区数组 如：detail= [{id: 2, name: "北京市"}, {id: 20, name: "天津市"}]
edit: 传入的选中省市区数组 如：edit= [{id: 2, name: "北京市"}, {id: 20, name: "天津市"}]
level: 展示省市区的级数 如：level=3
params: 传出值 如：params= 
```
### 单行样式组件

```html
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-ellipsis');?>
<!--例如-->
 <com-ellipsis text=""></com-ellipsis>
<!--属性及方法说明-->
text: "等级名称": 如 text="等级一"
```

### 分类组件

```php
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-select-cat');?>
<!--例如-->
 <com-select-cat :show=""  @cancel="cat_show=false"></com-select-cat>
<!--属性及方法说明-->
show: 是否显示,
value: 传入的值,
```

### 选择链接组件

```php
<!--组件引入-->
<?php ComponentHelper::loadComponentView('com-pick-link');?>
<!--例如-->
<com-pick-link mallId="" pickType="" title="" defaultSelectList="" defaultTabs="" popBoo=""></com-pick-link>
<!--属性及方法说明-->
mallId: 商城ID,
pickType: 传入的值,
title: 标题
defaultSelectList： 是否设置默认选中
defaultTab：选择需要的tabs栏
popBoo：不使用插槽，是否开启弹窗

```