vue-2024-ui 0.0.32 → 0.0.34
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.
- package/README.md +136 -211
- package/dist/index.es.js +1273 -2562
- package/package.json +3 -6
- package/README.form.md +0 -283
- package/README.table.md +0 -58
package/README.md
CHANGED
|
@@ -1,231 +1,156 @@
|
|
|
1
1
|
# vue-2024-ui
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 概述
|
|
4
|
+
`vue-2024-ui` 是一个基于 Vue 3 和 Element Plus 构建的插件，为你的项目提供丰富的功能和组件，帮助开发者更高效地搭建用户界面。
|
|
5
|
+
|
|
6
|
+
## 基本信息
|
|
7
|
+
- **版本**：0.0.33
|
|
8
|
+
- **作者**：guoyuanchao（邮箱：xg816620@163.com）
|
|
9
|
+
- **许可证**：MIT
|
|
4
10
|
|
|
5
11
|
## 安装
|
|
12
|
+
你可以使用以下命令安装 `vue-2024-ui`：
|
|
13
|
+
```bash
|
|
14
|
+
pnpm install vue-2024-ui
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 使用
|
|
18
|
+
在你的 Vue 项目中，你可以通过以下方式使用 `vue-2024-ui`：
|
|
6
19
|
|
|
7
|
-
```
|
|
8
|
-
import { createApp } from 'vue'
|
|
9
|
-
import ElementPlus from 'element-plus'
|
|
10
|
-
import 'element-plus/dist/index.css'
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
|
|
14
|
-
const app = createApp(App)
|
|
20
|
+
```javascript
|
|
21
|
+
import { createApp } from 'vue';
|
|
22
|
+
import ElementPlus from 'element-plus';
|
|
23
|
+
import 'element-plus/dist/index.css';
|
|
24
|
+
import App from './App.vue';
|
|
25
|
+
import gyc from 'vue-2024-ui';
|
|
26
|
+
|
|
27
|
+
const app = createApp(App);
|
|
15
28
|
app.use(ElementPlus, {
|
|
16
29
|
locale: zhCn,
|
|
17
|
-
})
|
|
18
|
-
app.use(gyc)
|
|
19
|
-
app.mount('#app')
|
|
20
|
-
|
|
30
|
+
});
|
|
31
|
+
app.use(gyc);
|
|
32
|
+
app.mount('#app');
|
|
21
33
|
```
|
|
22
34
|
|
|
23
|
-
|
|
35
|
+
## table 表格
|
|
36
|
+
|
|
37
|
+
### API 说明
|
|
38
|
+
所有属性和方法都在 Element Plus 基础上扩展，只显示增加的属性和方法，安装前必须安装 Element Plus，其他原有属性和方法请查询 [官方文档](https://element-plus.org/zh-CN/component/table.html)
|
|
39
|
+
|
|
40
|
+
### table 表格新增属性
|
|
41
|
+
|
|
42
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
43
|
+
| --------- | ------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
|
|
44
|
+
| columns | 表单列数 | number | 2 |
|
|
45
|
+
| footer | 控制表单底部按钮是否显示和样式设置，hidden 默认是 false，style 控制样式 | object | `{hidden: false, style:{ display:"flex","align-items":"center",justifyContent:"center"}}` |
|
|
46
|
+
| submit | 表单提交按钮，增加了 submitText，hidden 属性和 submit 方法 | object | `{type: "primary",submitText: "提交",hidden: false,submit: async (model) => {...}, }` |
|
|
47
|
+
| reset | 表单重置按钮，增加了 restText，hidden 属性和 reset 方法 | object | `{type: "primary",resetText: "重置",hidden: false,reset: () => {...}, }` |
|
|
48
|
+
| formItems | 通过 style 属性设置所有 items 的样式 | object | `{ style:{width:100%} }` |
|
|
49
|
+
|
|
50
|
+
### table 增加的事件
|
|
24
51
|
|
|
25
|
-
|
|
52
|
+
| 事件名 | 说明 | 类型 | 参数 |
|
|
53
|
+
| ------ | ------------ | -------- | -------------------------------------------------------------------------------------- |
|
|
54
|
+
| submit | 表单提交事件 | function | formData: 表单要提交的数据 |
|
|
55
|
+
| reset | 表单重置事件 | function | callback(isCustReset=false) 默认已处理了重置事件，如要重写事件则回调时传入 true 后再处理 |
|
|
26
56
|
|
|
27
|
-
|
|
57
|
+
### table 重写 slots 增加的插槽
|
|
58
|
+
|
|
59
|
+
| 插槽名 | 说明 |
|
|
60
|
+
| ------------ | ---------------------- |
|
|
61
|
+
| footer | 重写表单 footer 功能按钮 |
|
|
62
|
+
| footer-left | 表单左边增加按钮 |
|
|
63
|
+
| footer-right | 表单右边增加按钮 |
|
|
64
|
+
|
|
65
|
+
### tablecolumn 重写 slots
|
|
66
|
+
|
|
67
|
+
| 插槽名 | 说明 |
|
|
68
|
+
| --------------------- | -------------------------------- |
|
|
69
|
+
| item.key | 重写表单项 item |
|
|
70
|
+
| item.key-label | 重写表单项标题 |
|
|
71
|
+
| item.key-ctrl | 重写表单控件 |
|
|
72
|
+
| item.key-ctrl-options | 重写表单控件有 options 的字项 items |
|
|
73
|
+
|
|
74
|
+
### 示例
|
|
75
|
+
#### html
|
|
76
|
+
```html
|
|
28
77
|
<template>
|
|
29
|
-
|
|
30
|
-
<g-table v-model="formData" @select-all="all" @load="load" @delete="del" @view="read">
|
|
31
|
-
</g-table>
|
|
32
|
-
</div>
|
|
78
|
+
<!-- 示例代码 -->
|
|
33
79
|
</template>
|
|
34
|
-
|
|
35
80
|
```
|
|
36
|
-
|
|
37
|
-
```
|
|
81
|
+
#### javascript
|
|
82
|
+
```javascript
|
|
38
83
|
<script setup>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
name: {
|
|
43
|
-
label: "姓名", value: "张三", width: 100,
|
|
44
|
-
max: 5,// min: 2,
|
|
45
|
-
//required: true,
|
|
46
|
-
rules: [{ required: true, message: "行内姓名不能为空！" }],
|
|
47
|
-
columns: 2, "show-word-limit": true,
|
|
48
|
-
formItem: { style: { border: "0px solid #fff", padding: "0px" } },
|
|
49
|
-
formatter: (row, column, cellValue, index) => row.name, sortable: true,
|
|
50
|
-
decimals: 2,
|
|
51
|
-
// suffix: " ￥", prefix: '--', width: 150
|
|
52
|
-
},
|
|
53
|
-
age: { label: "年龄", type: "number", value: 18, min: 16, decimals: { num: 0, pad: true }, suffix: '岁', sortable: true },
|
|
54
|
-
email: { label: "邮箱", type: "email", value: "xg816620@163.com", width: 400 },
|
|
55
|
-
qq: { label: "QQ", type: "number", value: 123456789, edit: false },
|
|
56
|
-
url: {
|
|
57
|
-
label: "官网地址", type: "url", columns: 2, value: "https://www.baidu.com", width: 260, align: 'left'
|
|
58
|
-
},
|
|
59
|
-
address: {
|
|
60
|
-
label: "地址", columns: 2, type: "textarea", maxlength: 50, width: 120, value: "重庆巴南万达广场B座22楼1-8", required: true, validate: (rule, value, callback) => {
|
|
61
|
-
if (value.length > 50) {
|
|
62
|
-
callback("字符串长度不能超过20个");
|
|
63
|
-
} else {
|
|
64
|
-
callback();
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
formItem: { "label-position": "right" }, suffix: '#'
|
|
68
|
-
},
|
|
69
|
-
sex: {
|
|
70
|
-
label: "性别", type: "radio", value: 2, options: [
|
|
71
|
-
{ label: "男", value: 1, border: false },
|
|
72
|
-
{ label: "女", value: 2, border: false }]
|
|
73
|
-
},
|
|
74
|
-
select: {
|
|
75
|
-
label: "选择分组", type: "select", value: 2, filterable: true, remote: true,
|
|
76
|
-
change: (a) => { console.log(a); },
|
|
77
|
-
"remote-method": (query, callback) => {
|
|
78
|
-
new Promise((resolve, reject) => {
|
|
79
|
-
setTimeout(() => {
|
|
80
|
-
resolve([
|
|
81
|
-
{ label: "apple", value: 1 },
|
|
82
|
-
{ label: "xiaomi", value: 2 },
|
|
83
|
-
{ label: "huawei", value: 3 },
|
|
84
|
-
{ label: "oppo", value: 4, disabled: "disabled" }
|
|
85
|
-
].filter(a => a.label.includes(query)))
|
|
86
|
-
}, 1000);
|
|
87
|
-
}).then(a => {
|
|
88
|
-
callback(a)
|
|
89
|
-
})
|
|
90
|
-
},
|
|
91
|
-
options: [
|
|
92
|
-
{
|
|
93
|
-
label: "手机", options: [
|
|
94
|
-
{ label: "apple", value: 1 },
|
|
95
|
-
{ label: "xiaomi", value: 2 },
|
|
96
|
-
{ label: "huawei", value: 3 }
|
|
97
|
-
],
|
|
98
|
-
}, {
|
|
99
|
-
label: "电器", options: [
|
|
100
|
-
{ label: "电视", value: 4 },
|
|
101
|
-
{ label: "冰箱", value: 5 },
|
|
102
|
-
{ label: "空调", value: 6 }
|
|
103
|
-
],
|
|
104
|
-
},
|
|
105
|
-
]
|
|
106
|
-
},
|
|
107
|
-
select2: {
|
|
108
|
-
label: "选择", type: "select", value: 3, visible: false,
|
|
109
|
-
options: [
|
|
110
|
-
{ label: "apple", value: 1 },
|
|
111
|
-
{ label: "xiaomi", value: 2 },
|
|
112
|
-
{ label: "huawei", value: 3 }
|
|
113
|
-
]
|
|
114
|
-
},
|
|
115
|
-
birthday: {
|
|
116
|
-
label: "生日", type: "datetime", value: "1985-01-01", dateFormat: "YYYY年MM月DD日", width: 200,
|
|
117
|
-
//prefix: '日期',
|
|
118
|
-
suffix: '@',
|
|
119
|
-
style: { width: "100%" },
|
|
120
|
-
},
|
|
121
|
-
hobby: {
|
|
122
|
-
label: "爱好", columns: 2, type: "checkbox-group", value: [1, 2], options: [
|
|
123
|
-
{ label: "跑步", value: 1, border: false },
|
|
124
|
-
{ label: "乒乓球", value: 2, border: false },
|
|
125
|
-
{ label: "看书", value: 3, border: false },
|
|
126
|
-
{ label: "学习", value: 4, border: false },],
|
|
127
|
-
},
|
|
128
|
-
time: {
|
|
129
|
-
label: "时间", type: "time", value: new Date(1985, 1, 1, 18, 20, 33), dateFormat: "time",
|
|
130
|
-
//prefix: '日期',
|
|
131
|
-
suffix: '@', width: 150,
|
|
132
|
-
style: { width: "100%" },
|
|
133
|
-
},
|
|
134
|
-
timeSelect: { label: "下拉时间", type: "time-select", value: "08:30", dateFormat: "mm:ss" },
|
|
135
|
-
isDisabled: { label: "是否启用", type: "checkbox", value: "是", trueValue: "是", formatter: (row, column, cellValue, index) => row.isDisabled == 2 ? '是' : '否' },
|
|
136
|
-
rate: { label: "星级", type: "rate", value: 3, suffix: '星级' },
|
|
137
|
-
slider: { label: "进度", type: "slider", value: 0.3, style: { width: "90%" }, visible: false, },
|
|
138
|
-
switch: {
|
|
139
|
-
label: "开关", type: "switch", value: 3, inlinePrompt: true, visible: false,
|
|
140
|
-
activeText: "完整展示多个内容",
|
|
141
|
-
inactiveText: "多个内容"
|
|
142
|
-
},
|
|
143
|
-
autoComplete: {
|
|
144
|
-
label: "建议输入", type: "autocomplete", value: "李四", visible: false, fetchSuggestions: (a, b) =>
|
|
145
|
-
b([{ value: "三四", label: 1 }, { value: "张三", label: 2 }, { value: "三德子", label: 3 }, { value: "李四", label: 4 }]
|
|
146
|
-
.filter((c) => c.value.toString().includes(a))), onSelect: (a) => console.log(a)
|
|
147
|
-
},
|
|
148
|
-
cascader: {
|
|
149
|
-
label: "级联选择", type: "cascader", value: [1, 2, 3], visible: false, options: [
|
|
150
|
-
{ label: "父一", value: 1, children: [{ label: "父二", value: 2, children: [{ label: "父三", value: 3 }] }] },
|
|
151
|
-
{ label: "父四", value: 4 },
|
|
152
|
-
{ label: "父五", value: 5 },
|
|
153
|
-
]
|
|
154
|
-
},
|
|
155
|
-
transfer: {
|
|
156
|
-
label: "穿梭框", type: "hidden", columns: 4, value: [1, 2], titles: ['全部', "已选"], visible: false,
|
|
157
|
-
filterable: true, data: [
|
|
158
|
-
{ label: "选项一", key: 1 }, { label: "选项二", key: 2 }, { label: "选项三", key: 3 }, { label: "选项四", key: 4 },
|
|
159
|
-
{ label: "选项五", key: 5 }, { label: "选项六", key: 6 }, { label: "选项七", key: 7 }, { label: "选项八", key: 8 },
|
|
160
|
-
],
|
|
161
|
-
|
|
162
|
-
},
|
|
163
|
-
treeSelect: {
|
|
164
|
-
label: "树形选择", type: "tree-select", value: [1, 2, 3], visible: false,
|
|
165
|
-
"show-checkbox": true, data: [
|
|
166
|
-
{
|
|
167
|
-
label: "父一", value: 1, children: [
|
|
168
|
-
{ label: "父二", value: 2, children: [{ label: "父三", value: 3 }] }]
|
|
169
|
-
},
|
|
170
|
-
{ label: "父四", value: 4 },
|
|
171
|
-
{ label: "父五", value: 5 },
|
|
172
|
-
],
|
|
173
|
-
},
|
|
174
|
-
upload: {
|
|
175
|
-
label: "上传", type: "upload", value: [], style: { width: "100%" }, visible: false,
|
|
176
|
-
action: "https://jsonplaceholder.typicode.com/posts/",
|
|
177
|
-
headers: { "Authorization": "Bearer " + "your-token" }
|
|
178
|
-
},
|
|
179
|
-
control:{
|
|
180
|
-
view:{
|
|
181
|
-
auth:()=>true
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
});
|
|
84
|
+
// 示例代码
|
|
85
|
+
</script>
|
|
86
|
+
```
|
|
185
87
|
|
|
186
|
-
|
|
187
|
-
const list = [];
|
|
188
|
-
for (let i = 0; i < 210; i++) {
|
|
189
|
-
list.push({
|
|
190
|
-
id: i + 1,
|
|
191
|
-
name: `测试数据${i + 1}`,
|
|
192
|
-
age: Math.floor(Math.random() * 30) + 18,
|
|
193
|
-
email: `test${i + 1}@example.com`,
|
|
194
|
-
sex: (Math.floor(Math.random() * 2) + 1) == 2 ? '男' : '女',
|
|
195
|
-
select: 'xiaomi',
|
|
196
|
-
hobby: `测试数据${i + 1}`,
|
|
197
|
-
url: `https://www.example.com/test${i + 1}`,
|
|
198
|
-
birthday: new Date(2000, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1),
|
|
199
|
-
address: `测试地址${i + 1}`,
|
|
200
|
-
rate: Math.floor(Math.random() * 5) + 1,
|
|
201
|
-
timeSelect: new Date(),
|
|
202
|
-
isDisabled: Math.floor(Math.random() * 2) + 1,
|
|
203
|
-
qq: "123"
|
|
204
|
-
});
|
|
205
|
-
}
|
|
206
|
-
return list;
|
|
207
|
-
};
|
|
208
|
-
|
|
209
|
-
const del = (row, back) => {
|
|
210
|
-
back(true)
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
const edit = (row, c, i, m) => {
|
|
214
|
-
|
|
215
|
-
}
|
|
216
|
-
const read = (row, c, i, m) => {
|
|
217
|
-
}
|
|
218
|
-
formData.value.table = {
|
|
219
|
-
border: undefined,
|
|
220
|
-
page: { pageSize: 10, style: { justifyContent: 'flex-end' }, onChange: (a, b) => console.log(a, b) }
|
|
221
|
-
}
|
|
222
|
-
const all = (d) => console.log(d);
|
|
223
|
-
const load = (d, callback) => {
|
|
224
|
-
const { pageSize, currentPage } = d;
|
|
225
|
-
callback(createData().filter((item, index) => index >= (currentPage - 1) * pageSize && index < currentPage * pageSize), createData().length);
|
|
226
|
-
}
|
|
88
|
+
## form 表单
|
|
227
89
|
|
|
90
|
+
### FORM API 文档说明
|
|
91
|
+
所有属性和方法都在 Element Plus FORM 基础上扩展，只显示增加的属性和方法，安装前必须安装 Element Plus，其他原有属性和方法请查询 [官方文档](https://element-plus.org/zh-CN/component/form.html)
|
|
228
92
|
|
|
229
|
-
|
|
93
|
+
### form 表单新增属性
|
|
94
|
+
|
|
95
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
96
|
+
| --------- | ------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
|
|
97
|
+
| columns | 表单列数 | number | 2 |
|
|
98
|
+
| footer | 控制表单底部按钮是否显示和样式设置，hidden 默认是 false，style 控制样式 | object | `{hidden: false, style:{ display:"flex","align-items":"center",justifyContent:"center"}}` |
|
|
99
|
+
| submit | 表单提交按钮，增加了 label，hidden 属性和 click 方法 | object | `{type: "primary",label: "提交",hidden: false,click: async (model) => {...}, }` |
|
|
100
|
+
| reset | 表单重置按钮，增加了 label，hidden 属性和 click 方法 | object | `{type: "primary",label: "重置",hidden: false,click: () => {...}, }` |
|
|
101
|
+
| formItems | 通过 style 属性设置所有 items 的样式 | object | `{ style:{width:100%} }` |
|
|
102
|
+
|
|
103
|
+
### form 增加的事件
|
|
104
|
+
|
|
105
|
+
| 事件名 | 说明 | 类型 | 参数 |
|
|
106
|
+
| ------ | ------------ | -------- | -------------------------------------------------------------------------------------- |
|
|
107
|
+
| submit | 表单提交事件 | function | formData: 表单要提交的数据 |
|
|
108
|
+
| reset | 表单重置事件 | function | callback(isCustReset=false) 默认已处理了重置事件，如要重写事件则回调时传入 true 后再处理 |
|
|
109
|
+
|
|
110
|
+
### form 重写 slots 增加的插槽
|
|
111
|
+
|
|
112
|
+
| 插槽名 | 说明 |
|
|
113
|
+
| ------------ | ---------------------- |
|
|
114
|
+
| footer | 重写表单 footer 功能按钮 |
|
|
115
|
+
| footer-left | 表单左边增加按钮 |
|
|
116
|
+
| footer-right | 表单右边增加按钮 |
|
|
117
|
+
|
|
118
|
+
### formItem 重写 slots
|
|
119
|
+
|
|
120
|
+
| 插槽名 | 说明 |
|
|
121
|
+
| --------------------- | -------------------------------- |
|
|
122
|
+
| item.key | 重写表单项 item |
|
|
123
|
+
| item.key-label | 重写表单项标题 |
|
|
124
|
+
| item.key-ctrl | 重写表单控件 |
|
|
125
|
+
| item.key-ctrl-options | 重写表单控件有 options 的字项 items |
|
|
126
|
+
|
|
127
|
+
### formItem 验证 validate
|
|
128
|
+
|
|
129
|
+
| 属性名 | 说明 | 类型 |
|
|
130
|
+
| -------- | ---------------------------------------------------- | -------- |
|
|
131
|
+
| required | 必输字段 | boolean |
|
|
132
|
+
| max,min | 字符串验证最大长度和最小长度，数字验证最大值和最小值 | number |
|
|
133
|
+
| type | number,email,url 验证数字，邮箱，网址 | string |
|
|
134
|
+
| pattern | 正则验证 | regex |
|
|
135
|
+
| validate | 自定义验证 validate(rule, value, callback) | function |
|
|
230
136
|
|
|
137
|
+
### 示例
|
|
138
|
+
|
|
139
|
+
#### html
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<template>
|
|
143
|
+
<div>
|
|
144
|
+
正在创建中......
|
|
145
|
+
</div>
|
|
146
|
+
</template>
|
|
231
147
|
```
|
|
148
|
+
|
|
149
|
+
#### javascript
|
|
150
|
+
|
|
151
|
+
```javascript
|
|
152
|
+
<script setup>
|
|
153
|
+
import { ref } from "vue";
|
|
154
|
+
|
|
155
|
+
</script>
|
|
156
|
+
```
|