使用介绍
UI库除了依赖于 Vue 外，还依赖于 ph-utils
使用
1. 安装依赖
sh
npm install ph-utils litos-ui-vue1
2. 按需引入
当前按需引入只支持在 Vite 中配合自动导入实现；unplugin-vue-components、unplugin-auto-import、litosui-unplugin-resolver。
sh
npm install unplugin-vue-components unplugin-auto-import litosui-unplugin-resolver -D1
在 vite.config.ts 的 plugins 添加如下代码：
ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { litosUIVueResolver } from 'litosui-unplugin-resolver';
plugins: [
// ...
AutoImport({
resolvers: [litosUIVueResolver()],
dts: 'src/auto-imports.d.ts',
}),
Components({
dts: 'src/components.d.ts',
resolvers: [litosUIVueResolver()],
}),
];1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
当然如果不想自动引入，也可以手动引入组件和样式文件，例如：
ts
import { Button } from 'litos-ui-vue';
import 'litos-ui-vue/style/button/index.css';1
2
2
3. 全局CSS样式
组件库的样式全部使用 CSS 变量控制，为了让样式可控变得简单化，所以需要手动引入全局变量文件；在入口文件，如 main.ts 中引入
ts
import 'litos-ui-vue/style/vars.css';1
该变量样式文件包含如下内容
css
:root {
/* button、input 元素高度 */
--l-form-control-height: 32px;
/** 禁用状态颜色 */
--l-disabled-color: #e6e6e6;
/* 主题(primary)颜色 */
--l-primary-color: #8153ff;
--l-primary-color-light1: #9a75ff;
--l-primary-color-light2: #b397ff;
--l-primary-color-light3: #cdb9ff;
--l-primary-color-light4: #e6dbff;
--l-primary-color-light5: #f3eeff;
--l-primary-color-dark1: #6a42d6;
--l-primary-color-dark2: #5331ad;
/* 表示错误(error)的颜色 */
--l-error-color: #e73f4f;
--l-error-color-light3: #f5a2a9;
--l-error-color-light5: #fce8ea;
/* 表示成功(success)的颜色 */
--l-success-color: #94db24;
--l-success-color-light1: #a5e04a;
--l-success-color-light2: #b7e670;
--l-success-color-light3: #c9ec96;
--l-success-color-light4: #dbf2bc;
--l-success-color-light5: #edf9e2;
--l-success-color-dark1: #7bb81e;
/* 表示警告(warn)的颜色 */
--l-warn-color: #f90;
/* 表示信息(info)的颜色 */
--l-info-color: #999;
--l-info-color-light9: #f5f5f5;
/* 边框颜色 */
--l-border-color: #dedede;
--l-border-radius: 3px;
}
html.dark {
--l-disabled-color: #262727;
}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
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
样式修改
修改全局变量
如果想要修改样式，在需要在该引入的地方，重新引入一个新的样式表，然后覆盖上面的样式即可
例如，想把侧边栏宽度改为 200px, 可以通过下面这样
- 在
main.ts引入样式表
ts
import 'litos-ui-vue/style/vars.css';
import './style.css';1
2
2
- 在
style.css中添加样式
css
:root {
--l-border-color: red;
}1
2
3
2
3
通过上面就能修改，当然也能在侧边栏的样式的地方，手动覆盖变量也能实现
修改主题色
通常只需要覆盖 --l-primary-color 相关 CSS 变量就能实现主题色覆盖，例如: --l-primary-color、--l-primary-color-light1
css
:root {
--l-primary-color: #722ed1;
--l-primary-color-light1: #9254de;
--l-primary-color-light2: #b37feb;
--l-primary-color-light3: #d3adf7;
--l-primary-color-light4: #efdbff;
--l-primary-color-light5: #f9f0ff;
--l-primary-color-dark1: #531dab;
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
也可以通过
ph-utils/theme工具类的initColorTheme、toggleColorTheme、applyColorTheme函数来实现主题色切换
修改组件样式
组件所有的样式都基本只有一层，所以如果要修改样式，在需要套一个层级就能修改
比如想修改 Button 样式, 只需要给根节点添加一个样式，例如: #app；然后就能修改样式，如下：
css
#app .l-button {
background-color: red;
}1
2
3
2
3
浏览器兼容性
所有的组件尽量保证 ios 能够兼容到 12