open_websdk_vue3

A Vue 3 component library for OA approval workflow SDK.

安装

npm install open_websdk_vue3

使用

import { createApp } from 'vue'
import OpenWebsdkVue3 from 'open_websdk_vue3'
import 'open_websdk_vue3/dist/style.css'

const app = createApp(App)
app.use(OpenWebsdkVue3)

CSS 工具类迁移指南 (v2.x BREAKING CHANGE)

类名变更对照表

| 旧类名 | 新类名 | 说明 | |--------|--------|------| | .oa-pd-updown-px10 | .oa-py-10 | padding-top/bottom | | .oa-pd-left-px10 | .oa-pl-10 | padding-left | | .oa-pd-right-px10 | .oa-pr-10 | padding-right | | .oa-pd-px10 | .oa-p-10 | padding 全方向 | | .oa-mg-left-px10 | .oa-ml-10 | margin-left | | .oa-mg-right-px10 | .oa-mr-10 | margin-right | | .oa-mg-updown-px10 | .oa-my-10 | margin-top/bottom | | .oa-mg-top-px10 | .oa-mt-10 | margin-top | | .oa-mg-down-px10 | .oa-mb-10 | margin-bottom | | .oa-font-14 | .oa-fs-14 | font-size | | .oa-flex-box | .oa-flex .oa-items-center | flex + 垂直居中 | | .oa-flex-start | .oa-flex .oa-items-start | flex + 顶部对齐 |

新增工具类

间距类（0-60px，偶数 + 5的倍数）

/* 单方向 */
.oa-pt-{n}  /* padding-top */
.oa-pb-{n}  /* padding-bottom */
.oa-pl-{n}  /* padding-left */
.oa-pr-{n}  /* padding-right */
.oa-mt-{n}  /* margin-top */
.oa-mb-{n}  /* margin-bottom */
.oa-ml-{n}  /* margin-left */
.oa-mr-{n}  /* margin-right */

/* 组合方向 */
.oa-px-{n}  /* padding-left + padding-right */
.oa-py-{n}  /* padding-top + padding-bottom */
.oa-mx-{n}  /* margin-left + margin-right */
.oa-my-{n}  /* margin-top + margin-bottom */
.oa-p-{n}   /* padding */
.oa-m-{n}   /* margin */

可用值：0, 2, 4, 5, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 25, 26, 28, 30, 32, 34, 35, 36, 38, 40, 42, 44, 45, 46, 48, 50, 52, 54, 55, 56, 58, 60

字体大小类（0-60px）

.oa-fs-{n}  /* font-size */

Flex 工具类

.oa-flex            /* display: flex */
.oa-flex-col        /* flex-direction: column */
.oa-flex-wrap       /* flex-wrap: wrap */
.oa-flex-1          /* flex: 1 */
.oa-flex-center     /* flex + 居中对齐 */
.oa-flex-between    /* flex + 两端对齐 */
.oa-items-center    /* align-items: center */
.oa-items-start     /* align-items: flex-start */
.oa-items-end       /* align-items: flex-end */
.oa-justify-center  /* justify-content: center */
.oa-justify-between /* justify-content: space-between */
.oa-justify-start   /* justify-content: flex-start */
.oa-justify-end     /* justify-content: flex-end */

License

MIT