backend-management-ui 1.2.3 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/backend-management-ui.common.js +696 -5
  2. package/backend-management-ui.common.js.map +1 -1
  3. package/backend-management-ui.umd.js +696 -5
  4. package/backend-management-ui.umd.js.map +1 -1
  5. package/backend-management-ui.umd.min.js +2 -2
  6. package/backend-management-ui.umd.min.js.map +1 -1
  7. package/package.json +2 -3
  8. package/README.md +0 -221
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "backend-management-ui",
3
- "version": "1.2.3",
3
+ "version": "1.3.0",
4
4
  "main": "backend-management-ui.common.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -10,8 +10,7 @@
10
10
  "*.js",
11
11
  "*.js.map",
12
12
  "demo.html",
13
- "README.md",
14
- "assets/"
13
+ "README.md"
15
14
  ],
16
15
  "keywords": [
17
16
  "vue2",
package/README.md DELETED
@@ -1,221 +0,0 @@
1
- # backend-management-ui
2
-
3
- 一个基于 ElementUI 封装的 Vue2 后台管理组件库，简化后台开发中表格、表单、弹窗、按钮组、虚拟下拉框等高频组件的使用。
4
-
5
- ## 特性
6
- - 基于ElementUI的二次封装，无缝兼容ElementUI原有功能
7
- - 简化配置：表格/表单/按钮组通过配置快速生成，无需重复写模板
8
- - 高频场景覆盖：表格/表单/按钮组/虚拟下拉框等
9
- - 兼容 Vue2.6.x + ElementUI 2.15.x，无额外依赖。
10
-
11
- ## 安装
12
- npm 安装
13
-
14
- `npm install backend-management-ui --save`
15
-
16
- yarn 安装
17
-
18
- `yarn add backend-management-ui`
19
-
20
- ## 快速上手
21
- 全局引入
22
- ``` markdown
23
- ``` js
24
- // main.js
25
- import Vue from 'vue'
26
- import ElementUI from 'element-ui'
27
- import 'element-ui/lib/theme-chalk/index.css'
28
- import BackendManagementUI from 'backend-management-ui'
29
-
30
- Vue.use(ElementUI)
31
- Vue.use(BackendManagementUI) // 全局注册所有组件
32
- ```
33
-
34
- 按需引入
35
- ```markdown
36
- ```js
37
- // main.js
38
- import Vue from 'vue'
39
- import { UiTable, UiForm } from 'backend-management-ui'
40
- // 全局注册单个组件
41
- Vue.component('UiTable', UiTable)
42
-
43
- // 组件内
44
- import { UiTable, UiForm } from 'backend-management-ui'
45
- export default {
46
- components: {
47
- UiTable,
48
- UiForm
49
- }
50
- }
51
- ```
52
-
53
- ## 组件示例和文档
54
-
55
- ### ui-form 表单
56
- 使用el-form进行的二次封装
57
-
58
- 基本用法
59
-
60
- #### 典型编辑型表单
61
-
62
- ``` markdown
63
- ``` js
64
- <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" ></ui-form>
65
- <script>
66
- export default {
67
- data() {
68
- return {
69
- searchForm: {
70
- orderNo: null,
71
- status: null
72
- },
73
- formConfig: [
74
- {
75
- label: '订单号',
76
- prop: 'orderNo',
77
- component: 'el-input'
78
- },
79
- {
80
- label: '状态',
81
- prop: 'status',
82
- component: 'el-select',
83
- options: [
84
- {label: '成功', value: 0},
85
- {label: '失败', value: 1}
86
- ]
87
- }
88
- ]
89
- }
90
- }
91
- }
92
- </script>
93
- ```
94
-
95
- #### 典型展示表单
96
- ``` markdown
97
- ``` js
98
- <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" :showOperateBtn="false">
99
- <template #item-orderNo="{ item, model, index }">
100
- <span>{{ model.orderNo }}</span>
101
- </template>
102
- <template #item-status="{ model }">
103
- <span>{{ model.status }}</span>
104
- </template>
105
- </ui-form>
106
- <script>
107
- export default {
108
- data() {
109
- return {
110
- searchForm: {
111
- orderNo: "订单好xx",
112
- status: "成功"
113
- },
114
- formConfig: [
115
- {
116
- label: '订单号',
117
- prop: 'orderNo',
118
- },
119
- {
120
- label: '状态',
121
- prop: 'status',
122
- }
123
- ]
124
- }
125
- }
126
- }
127
- </script>
128
- ```
129
-
130
- #### 下拉类型接口获取数据
131
-
132
- ``` markdown
133
- ``` js
134
- // 或者 :apiMapConfig="{ status: statusApi }"
135
- <ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" ></ui-form>
136
- import { statusApi } from "@/api/status"
137
- <script>
138
- export default {
139
- data() {
140
- return {
141
- searchForm: {
142
- orderNo: null,
143
- status: null
144
- },
145
- formConfig: [
146
- {
147
- label: '订单号',
148
- prop: 'orderNo',
149
- component: 'el-input'
150
- },
151
- {
152
- label: '状态',
153
- prop: 'status',
154
- component: 'el-select',
155
- api: statusApi,
156
- {/* 或者 */}
157
- {/* api: {
158
- url: statusApi,
159
- params: {
160
- page: 1,
161
- pageSize: 10,
162
- }
163
- } */}
164
- }
165
- ]
166
- }
167
- }
168
- }
169
- </script>
170
- ```
171
-
172
- #### 其他用法
173
- ``` markdown
174
- ``` js
175
- // Form Attributes/Methods直接传
176
- <ui-form :model="searchForm" :formConfig="formConfig" inline label-width="100px">
177
- </ui-form>
178
- <script>
179
- export default {
180
- data() {
181
- return {
182
- searchForm: {
183
- orderNo: "订单好xx",
184
- status: "成功"
185
- },
186
- formConfig: [
187
- {
188
- label: '订单号',
189
- prop: 'orderNo',
190
- component: 'el-input',
191
- {/* Form-Item Attributes */}
192
- formItemAttrs: {
193
- "label-width": "120px",
194
- size: "small"
195
- },
196
- },
197
- {
198
- label: '状态',
199
- prop: 'status',
200
- component: 'el-select',
201
- {/* 表单组件属性 */}
202
- attrs: {
203
- style: {
204
- width: "200px", // 默认220px
205
- },
206
- filterable: true,
207
- }
208
- }
209
- ]
210
- }
211
- }
212
- }
213
- </script>
214
- ```
215
-
216
- #### props
217
-
218
- | 参数 | 说明 | 类型 | 可选值 | 默认值 |
219
- | --------- | ----------- | -------- | ------ | --------- |
220
- | formRef | form的实例 | string | - | formRef |
221
- | model | 表单数据对象 | object | - | {} |