Vue3 组件 ti-element-vue 详细说明
Ti-Element-Vue
Components are configured with parameters. The goal is to use a small amount of code to achieve rapid development of business interfaces and to unify the use of components.
building Test Project Vue3
nvm use 16.0.0
npm install -g @vue/[email protected]
vue create ti-element-vue-test
ti-element-vue-test install Ti-Element-Vue
yarn add ti-element-vue示例项目
可以去 GitHub 搜索 关键字 ti-element-vue-test
中文README说明文档 GITHUB
1[返回](../README.md)
2# Ti组件库 - Tui
3描述：组件配合参数配置化，目标用少量的代码，实现业务界面快速开发，以及能很好的统一组件使用。
4- 开发：xiaohua.tu
5- 环境框架：node + vue3 + vite
6- 依赖组件：element plus vue3
7- 备注：node v16.0.0, npm v7.10.0, yarn v1.22.21, vite v2
8- 组件库 [TiSearch](#1), [TiTable](#2)
9
10
11## TiSearch
12- 表单组件 使用于搜索业务-数据查询 和 表单业务-数据保存.
13- 组件和配置之间，存在着紧密的关系，相互配合能让你的界面开发很顺畅，又快又方便 ^_^
14[总览](../README.md) | [#Top](#top)
15
16### 组件示例
17```bash
18
35
36
37
38```
39
40### 组件属性详解
41- form-model： 响应绑定
42- form-config： 构建配置化
43- is-submit： 是否提交（系统按钮-自定义按钮文字）
44- is-back： 是否回退（系统按钮-自定义按钮文字）
45- is-reset： 是否重置（系统按钮-自定义按钮文字）
46- show-reset： 是否重置（系统按钮-按钮文字重置）
47- onPostUploadImage： 图片上传响应（自定义按钮）
48- on-submit： 提交响应
49- on-back： 回退响应
50- on-reset： 重置响应
51- onSelectionChange： 配置为激活的组件-发生的值变化事件
52- onSelectionClear： 配置为激活的组件-发生的清空事件
53- onPostUploadImage： 配置为上传组件-接口响应事件
54- ： 自定义插槽（可以自愿布局）
55- ： 系统插槽（属于按钮区域，固定于组件区域底部）
56
57### 配置示例
58```bash
59export const formConfig = [
60 {
61 label: '编码',
62 prop: 'code',
63 type: 'el-input',
64 placeholder: '请输入编码'
65 }
66]
67```
68### 配置详解
69定义一个数组对象灌入组件的属性（form-config）, 组件会按照配置数据进行自动渲染出相应的元素以及元素的交互能力。
70- label： 参数显示的名称
71- prop： 参数对应的属性
72- type： 参数映射的组件类型
73- placeholder： 参数的提示语
74- rules： 参数的校验（可设置表达式）
75- options： 下拉框数据（仅适用el-select）
76- defaultValue： 初始值
77- clearable： 激活清空功能
78- componentLabel： 自定义显示的名称
79- requestUrl： 请求的路径（仅适用el-upload）
80- isActive： 激活交互响应事件
81- slotName： 自定义插槽名称（适用自定义布局）
82- style： 渲染元素的样式配置（适用自定义布局）
83- disabled： 元素禁止的交互（适用浏览详情，只读模式）
84
85### 配置备注
86个别属性需要特殊说明。
87#### type 参数映射的组件类型
88el-input，el-select，el-checkbox，el-upload，el-date-picker，el-tag，el-checkbox-group，slot，其他(可查询element plus）
89
90#### 配置实例
91- 基础配置（输入元素）
92```bash
93export const formConfig = [
94 {
95 label: '编码',
96 prop: 'code',
97 type: 'el-input',
98 placeholder: '请输入编码'
99 }
100]
101```
102
103- 基础配置（选择元素）
104```bash
105/**
106 ** 也可以这样设置
107 ** options：['喜欢'，'超喜欢编码']
108 **/
109export const formConfig = [
110 {
111 label: '编码',
112 prop: 'code',
113 type: 'el-select',
114 placeholder: '请选择编码',
115 options: [
116 { value: '1', label: '喜欢编码' },
117 { value: '2', label: '超喜欢编码' }
118 ]
119 }
120]
121```
122
123- 基础配置（开关元素）
124```bash
125// 如想扩充属性（可查看el-switch属性列表）
126const elSwitchMap = {
127 activeValue: '1', // 开
128 inactiveValue: '2' // 关
129}
130export const formConfig = [
131 {
132 label: '开关',
133 prop: 'code',
134 type: 'el-switch',
135 placeholder: '请选择开关',
136 ...elSwitchMap
137 }
138]
139```
140
141- 基础配置（勾选元素）
142```bash
143// 如想扩充属性（可查看el-switch属性列表）
144const elCheckboxMap = {
145 trueLabel: '1', // 开
146 falseLabel: '2' // 关
147}
148export const formConfig = [
149 {
150 label: '勾选',
151 prop: 'code',
152 type: 'el-checkbox',
153 placeholder: '请勾选',
154 ...elCheckboxMap
155 }
156]
157```
158
159- 基础配置（上传元素）
160```bash
161export const formConfig = [
162 {
163 label: '上传',
164 prop: 'uploadUrl',
165 type: 'el-upload',
166 placeholder: '请选择上传文件',
167 requestUrl: '/uploadFile'
168 }
169]
170```
171
172- 基础配置（日期元素）
173```bash
174export const formConfig = [
175 {
176 label: '编码',
177 prop: 'code',
178 type: 'el-date-picker',
179 placeholder: '请输入日期'
180 }
181]
182```
183
184- 基础配置（标签元素）
185```bash
186/**
187 ** 也可以这样设置
188 ** tagType 属性（info | success | warning | danger）
189 **/
190export const formConfig = [
191 {
192 label: '编码',
193 prop: 'code',
194 type: 'el-tag',
195 tagType: 'info'
196 }
197]
198```
199
200- 基础配置（多选管理元素）
201```bash
202/**
203 ** 也可以这样设置
204 ** options：['喜欢'，'超喜欢编码']
205 **/
206export const formConfig = [
207 {
208 label: '编码',
209 prop: 'code',
210 type: 'el-checkbox-group',
211 placeholder: '请选择编码',
212 options: [
213 { value: '1', label: '喜欢编码' },
214 { value: '2', label: '超喜欢编码' }
215 ]
216 }
217]
218```
219
220- 特殊配置（插槽元素）
221```bash
222export const formConfig = [
223 {
224 label: '编码',
225 slotName: 'my-slot',
226 type: 'slot',
227 style: {
228 width: '100%'
229 }
230 }
231]
232```
233
234- 特殊配置（隔断元素）
235```bash
236export const formConfig = [
237 {
238 style: {
239 width: '100%',
240 height: '0px',
241 backgroundColor: 'transparent'
242 }
243 }
244]
245```
246
247### 实战交互
2481. 配置文件完成（config.ts）
2492. 组件在业务页面文件完成（page.vue）
2503. 开始写交互代码
251#### 3.1 元素下拉框数据需要接口返回
252##### config.ts
253```bash
254export const formConfig = [
255 {
256 label: '编码',
257 prop: 'code',
258 type: 'el-select',
259 placeholder: '请选择编码',
260 options: []
261 }
262]
263```
264##### page.vue
265```bash
266
267
543
544## Development
545
546Run `yarn` to install dependencies
547
548### Recommended IDE Setup
549
550- [VS Code](https://code.visualstudio.com/)
551
552
553### Follow
554