# UILibrary

**Repository Path**: dalefengs/UILibrary

## Basic Information

- **Project Name**: UILibrary
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-26
- **Last Updated**: 2023-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Components 组件

###  Card 卡片

| 属性                | 说明           | 类型    | 默认值 |
| ------------------- | -------------- | ------- | ------ |
| title               | 标题           | String  | 无     |
| titleRight          | 标题右边       | String  | 无     |
| borderShow          | 标题下边框     | Boolean | true   |
| headerShow          | 是否显示标题   | Boolean | true   |
| hearderBottomMargin | 标题下内外边距 | Boolean | true   |
| bodyShow            | 是否显示内容   | Boolean | true   |

```html
<card>
    <view slot="header"><text class="grace-black6 grace-h4">工作时间及待遇</text></view>
    <view slot="body">
        <card-list label="服务时间">{{ time }}</card-list>
        <card-list label="休息时间">{{ rest }}</card-list>
        <card-list label="工资">
            <text class="grace-red">￥{{ price }}/月</text>
        </card-list>
        <card-list label="经理">
            <text>{{ manageName }}</text>
            <text style="margin: 0 30rpx 0 20rpx">{{ managePhone }}</text>
            <text class="grace-red fa-icon fa-phone grace-h3"></text>
            <text class="grace-red fa-icon fa-commenting grace-h3" style="position:relative;left: 20rpx; bottom: 5rpx;"></text>
        </card-list>
    </view>
</card>
```

![image-20201027083315638](.\access\image-20201027083315638.png)预览图

### Label-list 卡片标签

> 可独立使用 

| 属性  | 说明 | 类型   | 默认值 |
| ----- | ---- | ------ | ------ |
| label | 标签 | String | ' '    |

```html
<card-list label="休息时间">{{ rest }}</card-list>
```

![image-20201027084046583](.\access\image-20201027084046583.png)预览

### 滑动列表组件

> 属性

| 属性     | 说明     | 类型          | 默认值               |
| -------- | -------- | ------------- | -------------------- |
| width    | 列表宽度 | Number        | 750                  |
| btnWidth | 按钮宽度 | Number        | 160                  |
| btns     | 按钮     | Array[Object] |                      |
| img      | 列表图片 | String        | /static/empty.png    |
| imgSize  | 图片高宽 | Array         | ['100rpx', '100rpx'] |

> 事件

| 事件    | 说明                                            | 接收参数                    |
| ------- | ----------------------------------------------- | --------------------------- |
| thStart | 列表开始滑动,用于滑动的列表的时候，关闭其他按钮 | 无                          |
| btnTap  | 点击按钮                                        | indexBtn 当前点击的按钮下标 |

![image-20201118175802737](.\access\image-20201118175802737.png)



## Layout 布局

### 分类展示

<img src=".\access\image-20201028195632084.png" alt="image-20201028195632084" style="zoom:50%;" />

## Style 样式

### 文字两端对齐

> 兼容手机端和h5

```scss
.list {
	line-height: 1;
	.label {
		display: inline-block;
		width: 136rpx;
		text-align: justify;
		vertical-align: top;
		position: relative;
		&::after {
			display: inline-block;
			width: 100%;
			content: '';
			height: 0;
		}
	}
}
```

![image-20201027083315638](.\access\image-20201027083315638.png)

## JavaScript 函数

### request类

```javascript
export default{
	//全局配置
	common:{
		baseUrl:'http://ceshi3.dishait.cn/api',
		header:{
			'Content-Type': "application/json; charset=UTF-8",
			'COntent-Type': "application/x-www-form-urlencoded"
		},
		data:{},
		method:'GET',
		dataType:'json'
	},
	//请求 返回一个promise
	request(options = {}){
		//组织请求参数
		options.url = this.common.baseUrl + options.url
		options.header = options.header || this.common.header
		options.method = options.method || this.common.method
		options.dataType = options.dataType || this.common.dataType
		options.data = options.data || this.common.data
		return new Promise((resolve,reject)=>{
			uni.request({
				//拓展运算符号 解构options
				...options,
				success: (res) => {
					resolve(res)
				},
				fail: (err) => {
					//如果请求失败提示错误信息
					uni.showToast({
						title:err.errMsg || '请求失败',
						icon:'none'
					})
					return reject()
				}
			})
		})
	}
}
```

> 需要在main.js中引入工具类

```javascript
//引入封装的request类
import http from "@/common/lib/request.js"
//把request类放到vue实例中
Vue.prototype.$http = http
```

> 调用方法

```javascript
this.$http.request({
			url:'/index_category/data',
			method:'GET',	//默认为GET请求
    		header:{},		//为空可不传
			data:{},		//为空可不传
		}).then(ret => {
			console.log(ret);
		})
```