# 配置
# 全局属性配置
piui所有组件属性都设置了默认值，为了达到更高的灵活度，我们允许组件属性的全局配置，在引入piui的语句中，可以通过Vue插件 (opens new window)option进行覆盖，覆盖命名规范
{
'组件名': {
prop1: '要覆盖的组件属性'
}
}
1
2
3
4
5
2
3
4
5
TIP
- 组件名覆盖请去除
pi-前缀，驼峰命名，比如<pi-popup>，组件名覆盖应该写popup - 属性配置请使用驼峰命名，
Object类型的属性会使用merge深拷贝 (opens new window)方式合并
例：
- 配置导航栏组件的主页路径和自定义样式
- 配置弹窗组件的关闭按钮的颜色
import Vue from 'vue';
import piui from "sadais-piui";
Vue.use(piui, {
navbar: {
homePage: 'pages/components/index',
customStyle: {
boxShadow: '0 4px 10px 0 rgb(0 0 0 / 7%)'
}
},
popup: {
closeIcon: {
color: '#5a7dff'
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 公用属性
方便开发人员灵活定制样式，每个组件我们开放了以下的公用属性，此后组件属性中就不再描述，大家知悉使用便可
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| customStyle | 自定义样式，对象形式（默认值：{}） | Object | false | - |
| customClass | 自定义样式类，字符串形式（''） | String | false | - |
# 样式覆盖
使用customClass和customStyle我们可以轻松对组件进行样式覆盖
customClass和元素的class进行合并覆盖customStyle和元素的style原理一样，优先级最高，如果遇到customClass覆盖不了的，可以使用此配置
TIP
由于跨平台的特性，customClass和class不一定起作用
# 主题定制
piui支持主题定制，以下scss变量，可以在uni.scss中重写覆盖
// 基础设置
$pi-font-size: 28rpx ; // 文字大小
$pi-font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei',
'微软雅黑', Arial, sans-serif ; // 字体样式
$pi-background-color: #ffffff ; // 背景颜色
$pi-line-color: #f4f4f4 ; // 通用线颜色
$pi-placeholder-color: #999999 ; // placeholder颜色
$pi-content-padding: 24rpx ; // pi-content内容区域默认padding
$pi-disabled-opacity: 0.4 ; // 禁用透明度
// 动画
$pi-animation-duration: 0.3s ; // 动画执行时长
$pi-animation-timing-function: none ; // 动画执行函数
// font颜色
$pi-font-color: #666666 ; // 文字颜色
$pi-primary-color: #5a7dff ; // 主要颜色 // ff6a00
$pi-secondary-color: #6c44a1 ; // 次级颜色
$pi-tertiary-color: #00a8a4 ; // 第三级颜色
$pi-fourth-color: #12bc83 ; // 第四级颜色
$pi-fifth-color: #fcf2f4 ; // 第五级颜色
// card
$pi-card-title-fontsize: 30rpx ; // 章节标题字体大小
$pi-card-title-color: #333333 ; // 章节标题字体大小
// section 章节
$pi-section-border-color: #f4f4f4 ; // 章节边框颜色
$pi-section-border-width: 4rpx ; // 章节边框宽度
$pi-section-title-fontsize: 30rpx ; // 章节标题字体大小
$pi-section-title-color: #333333 ; // 章节标题字体大小
$pi-section-desc-fontsize: 28rpx ; // 章节描述字体大小
$pi-section-desc-color: #999999 ; // 章节描述字体大小
$pi-section-extra-fontsize: 28rpx ; // 章节描述字体大小
$pi-section-extra-color: #999999 ; // 章节描述字体大小
// 宫格
$pi-grid-border-color: #f4f4f4 ; // 宫格边框颜色
$pi-grid-border-width: 2px ; // 宫格边框宽度
// 列表
$pi-list-border-color: #f4f4f4 ; // 列表边框颜色
$pi-list-border-width: 4rpx ; // 列表边框宽度
$pi-list-title-fontsize: 32rpx ; // 列表项标题字体大小
$pi-list-title-color: #333333 ; // 列表项标题字体大小
$pi-list-desc-fontsize: 28rpx ; // 列表项描述字体大小
$pi-list-desc-color: #999999 ; // 列表项描述字体大小
$pi-list-extra-fontsize: 28rpx ; // 列表项右侧字体大小
$pi-list-extra-color: #999999 ; // 列表项右侧字体大小
// 表单
$pi-form-border-color: #f4f4f4 ; // 列表边框颜色
$pi-form-border-width: 4rpx ; // 列表边框宽度
$pi-form-size: 32rpx ; // 表单文字大小
$pi-form-label-size: 32rpx ; // 表单文字大小
$pi-form-label-weight: 400 ; // 表单文字大小
$pi-form-label-color: #333333 ; // 表单label颜色
$pi-form-item-height: 100rpx ; // 表单高度
$pi-form-input-color: #333333 ; // 表单输入框颜色
$pi-form-required-color: #c0282f ; // 表单必选提示颜色
// iphonex底部安全区域背景颜色
$pi-safearea-bg: transparent ;
// 按钮default样式
$pi-button-default-radius: 8rpx ;
$pi-button-default-font-size: 32rpx ;
$pi-button-default-height: 88rpx ;
$pi-button-default-padding: 0 56rpx ;
// 按钮large样式
$pi-button-large-radius: 16rpx ;
$pi-button-large-font-size: 32rpx ;
$pi-button-large-height: 98rpx ;
$pi-button-large-padding: 0 64rpx ;
// 按钮medium样式
$pi-button-medium-radius: 6rpx ;
$pi-button-medium-font-size: 32rpx ;
$pi-button-medium-height: 72rpx ;
$pi-button-medium-padding: 0 48rpx ;
// 按钮small样式
$pi-button-small-radius: 4rpx ;
$pi-button-small-font-size: 28rpx ;
$pi-button-small-height: 64rpx ;
$pi-button-small-padding: 0 40rpx ;
// 按钮tiny样式
$pi-button-tiny-radius: 4rpx ;
$pi-button-tiny-font-size: 28rpx ;
$pi-button-tiny-height: 56rpx ;
$pi-button-tiny-padding: 0 32rpx ;
// 按钮mini样式
$pi-button-mini-radius: 4rpx ;
$pi-button-mini-font-size: 24rpx ;
$pi-button-mini-height: 48rpx ;
$pi-button-mini-padding: 0 24rpx ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101