# VUE面板组件

**Repository Path**: windthesky/vue-panel-components

## Basic Information

- **Project Name**: VUE面板组件
- **Description**: VUE面板组件
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-12-30
- **Last Updated**: 2024-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE面板组件

#### 介绍
VUE面板组件

#### 使用说明

1.  import mianban from './../../mianban.vue' //引入位置
2.  Vue.component('mianban',mianban); //引入组件

#### 例子

```
<mianban header="订单信息" yangshi="panel-secondary">
//内容
</mianban>
```


#### 自定义头部
例子
```
<mianban header="收车后确认司机垫付的费用" yangshi="panel-default">
<div style="height: 40px;" slot="header">
//头部内容
</div>
//内容
</mianban>
```

实例
```
<mianban header="收车后确认司机垫付的费用" yangshi="panel-default">
<div style="height: 40px;" slot="header">
<el-avatar :size="40" :src="订单流程.头像"></el-avatar>
<span class="ml-10 c-666" style="vertical-align: 13px;">
{{ 订单流程.操作人 }} 操作于 {{ 订单流程.操作日期 }}</span>
</div>
<div>{{ 订单流程.内容 }}</div>
</mianban>
```

#### 属性说明

| 属性名  | 类型  |  说明 |
|---|---|---|
| header  |  String | 标题  |
|  yangshi |  String  | 颜色，可选值：panel-default；panel-primary；panel-secondary；panel-success；panel-warning；panel-danger；panel-fenzi；panel-shenlv；panel-zise；panel-hongse；panel-jinhuang；panel-zongse；panel-shenhongse；panel-lanse；panel-dianqingse；panel-shenfenhong |



#### 效果

![效果](https://images.gitee.com/uploads/images/2020/1230/150014_6479afff_1268868.png "效果.png")
![效果](https://images.gitee.com/uploads/images/2020/1230/152028_47edc0c2_1268868.png "效果.png")
![效果](https://images.gitee.com/uploads/images/2020/1230/152051_0a2b2d5f_1268868.png "效果.png")
![效果](https://images.gitee.com/uploads/images/2020/1230/152101_51dadd31_1268868.png "效果.png")
![效果](https://images.gitee.com/uploads/images/2020/1230/152111_33d37f35_1268868.png "效果.png")