joy-admin-components 0.1.18 → 0.1.19
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 +0 -117
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,120 +24,3 @@ app.use(ElementPlus)
|
|
|
24
24
|
app.use(JoyAdminComponents)
|
|
25
25
|
app.mount('#app')
|
|
26
26
|
```
|
|
27
|
-
|
|
28
|
-
### 按需引入
|
|
29
|
-
|
|
30
|
-
```js
|
|
31
|
-
import { JoyTable, JoyForm, JoySearch } from 'joy-admin-components'
|
|
32
|
-
|
|
33
|
-
export default {
|
|
34
|
-
components: {
|
|
35
|
-
JoyTable,
|
|
36
|
-
JoyForm,
|
|
37
|
-
JoySearch
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## 组件列表
|
|
43
|
-
|
|
44
|
-
### JoyTable
|
|
45
|
-
|
|
46
|
-
增强的表格组件，集成了分页功能。
|
|
47
|
-
|
|
48
|
-
```vue
|
|
49
|
-
<template>
|
|
50
|
-
<joy-table
|
|
51
|
-
:data="tableData"
|
|
52
|
-
:current-page="page"
|
|
53
|
-
:page-size="limit"
|
|
54
|
-
:total="total"
|
|
55
|
-
@current-change="handleCurrentChange"
|
|
56
|
-
@size-change="handleSizeChange"
|
|
57
|
-
>
|
|
58
|
-
<el-table-column prop="name" label="姓名" />
|
|
59
|
-
<el-table-column prop="age" label="年龄" />
|
|
60
|
-
</joy-table>
|
|
61
|
-
</template>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### JoyForm
|
|
65
|
-
|
|
66
|
-
动态表单组件，支持多种表单项类型。
|
|
67
|
-
|
|
68
|
-
```vue
|
|
69
|
-
<template>
|
|
70
|
-
<joy-form
|
|
71
|
-
:model="form"
|
|
72
|
-
:rules="rules"
|
|
73
|
-
:form-items="formItems"
|
|
74
|
-
@submit="handleSubmit"
|
|
75
|
-
@reset="handleReset"
|
|
76
|
-
/>
|
|
77
|
-
</template>
|
|
78
|
-
|
|
79
|
-
<script setup>
|
|
80
|
-
const form = reactive({
|
|
81
|
-
name: '',
|
|
82
|
-
age: '',
|
|
83
|
-
gender: ''
|
|
84
|
-
})
|
|
85
|
-
|
|
86
|
-
const formItems = [
|
|
87
|
-
{ label: '姓名', prop: 'name', type: 'input' },
|
|
88
|
-
{ label: '年龄', prop: 'age', type: 'input' },
|
|
89
|
-
{
|
|
90
|
-
label: '性别',
|
|
91
|
-
prop: 'gender',
|
|
92
|
-
type: 'select',
|
|
93
|
-
options: [
|
|
94
|
-
{ label: '男', value: 'male' },
|
|
95
|
-
{ label: '女', value: 'female' }
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
]
|
|
99
|
-
</script>
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### JoySearch
|
|
103
|
-
|
|
104
|
-
搜索表单组件，适用于列表页面的筛选功能。
|
|
105
|
-
|
|
106
|
-
```vue
|
|
107
|
-
<template>
|
|
108
|
-
<joy-search
|
|
109
|
-
:search-items="searchItems"
|
|
110
|
-
:initial-values="initialValues"
|
|
111
|
-
@search="handleSearch"
|
|
112
|
-
@reset="handleReset"
|
|
113
|
-
/>
|
|
114
|
-
</template>
|
|
115
|
-
|
|
116
|
-
<script setup>
|
|
117
|
-
const searchItems = [
|
|
118
|
-
{ label: '姓名', prop: 'name', type: 'input' },
|
|
119
|
-
{ label: '状态', prop: 'status', type: 'select', options: [
|
|
120
|
-
{ label: '启用', value: 1 },
|
|
121
|
-
{ label: '禁用', value: 0 }
|
|
122
|
-
]}
|
|
123
|
-
]
|
|
124
|
-
|
|
125
|
-
const initialValues = {
|
|
126
|
-
name: '',
|
|
127
|
-
status: ''
|
|
128
|
-
}
|
|
129
|
-
</script>
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
## 开发
|
|
133
|
-
|
|
134
|
-
```bash
|
|
135
|
-
# 安装依赖
|
|
136
|
-
npm install
|
|
137
|
-
|
|
138
|
-
# 启动开发服务器
|
|
139
|
-
npm run dev
|
|
140
|
-
|
|
141
|
-
# 构建库
|
|
142
|
-
npm run build
|
|
143
|
-
```
|