Skip to content

Commit 3cd4955

Browse files
lichunnlichunn
committed
feat/Add tinyvue knowledge base
1 parent 50f5e0b commit 3cd4955

File tree

13 files changed

+525
-0
lines changed

13 files changed

+525
-0
lines changed

‎documents/tinyengine/CanvasFlexBox.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# CanvasFlexBox 组件生成 schema
2+
3+
CanvasFlexBox 组件是一个弹性布局容器。
4+
componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。
5+
6+
## CanvasFlexBox 组件生成 schema 代码示例
7+
8+
### 基本用法
9+
10+
```json
11+
{
12+
"componentName": "CanvasFlexBox",
13+
"props": {
14+
"flexDirection": "row",
15+
"gap": "8px", // 可通过 gap 属性调整间距
16+
"padding": "8px", // padding 属性调整内间距
17+
"className": "component-base-style",
18+
"flexDirection": "row", // 通过对应的 flexDirection 属性，可以设置为对应的水平对齐方式。默认为 row（水平,起点在左端），可选值为 row（水平,起点在左端）、row-reverse（水平,起点在右端）、 column（垂直,起点在上沿）、column-reverse（垂直,起点在下沿）。
19+
"justifyContent": "space-around", // 通过对应的 justifyContent 属性，可以设置为对应的水平对齐方式。默认为 flex-start（左对齐），可选值为 flex-start（左对齐）、flex-end（右对齐）、 center（居中）、space-between（两端对齐，子元素间隔相等）、space-around（子元素两侧间隔相等）。
20+
"alignItems": "stretch" // 通过对应的 alignItems 属性，可以设置为对应的垂直对齐方式。默认为 center（交叉轴的中点对齐），可选值为 center（交叉轴的中点对齐）、flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、baseline（以子元素第一行文字的基线对齐）、stretch（占满容器高度）。
21+
},
22+
"children": [],
23+
"id": "236d76f3"
24+
}
25+
```

‎documents/tinyengine/breadcrumb.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# TinyVue breadcrumb 组件生成 schema
2+
3+
TinyBreadcrumb是一个面包屑组件。
4+
componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。
5+
6+
## breadcrumb 组件生成 schema 代码示例
7+
8+
### 基本用法
9+
10+
```json
11+
{
12+
"componentName": "TinyBreadcrumb",
13+
"props": {
14+
"options": [
15+
{
16+
"to": "{ path: '/' }",
17+
"label": "首页"
18+
},
19+
{
20+
"to": "{ path: '/breadcrumb' }",
21+
"label": "产品"
22+
},
23+
{
24+
"replace": "true",
25+
"label": "软件"
26+
}
27+
],
28+
"className": "component-base-style",
29+
"separator": ".", // 可通过 separator 属性设置面包屑中间的分隔符。
30+
"textField": "label", // 可通过 textField 属性设置面包屑的显示键值，结合options使用。
31+
"onSelect": {
32+
"type": "JSExpression",
33+
"value": "this.onSelectNew"
34+
} // 面包屑的事件，包括 onSelect（选择 breadcrumb 时触发）、onClick（点击事件）、onChange（值被改变时触发）、onFocus（获得焦点时触发）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值
35+
},
36+
"children": [],
37+
"id": "62815232"
38+
}
39+
```

‎documents/tinyengine/button.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# TinyVue button 组件生成 schema
2+
3+
TinyButton是一个按钮组件。
4+
componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。
5+
6+
## button 组件生成 schema 代码示例
7+
8+
### 基本用法
9+
10+
```json
11+
{
12+
"componentName": "TinyButton",
13+
"props": {
14+
"text": "按钮文案",
15+
"className": "component-base-style",
16+
"type": "primary", // 通过 type 设置按钮类型，可以设置为对应的类型。可选值为 primary、success、info、warning、danger和 text。
17+
"disabled": false, // 可通过 disabled 属性设置按钮是否禁用。
18+
"size": "large", // 可通过 size 属性设置尺寸大小，可选值：large / medium / small / mini。
19+
"round": true, // 可通过 round 属性设置按钮是否圆角。
20+
"plain": true, // 可通过 plain 属性设置按钮是否为朴素按钮。
21+
"reset-time": 2, // 可通过 reset-time 属性设置按钮禁用时间。可防止重复提交，单位毫秒
22+
"circle": false, // 可通过 circle 属性设置是否为圆形按钮。
23+
"autofocus": true, // 可通过 autofocus 属性设置是否自动聚焦。
24+
"loading": true, // 可通过 loading 属性设置是否加载中样式。
25+
"onUpdate:modelValue": {
26+
"type": "JSExpression",
27+
"value": "this.onUpdate_modelValueNew"
28+
} // 按钮的事件，包括 onChange（值被改变时触发）、onInput（输入值改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onBlur（失去焦点时触发）、onFocus（获得焦点时触发）、onClear（点击清空按钮时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值
29+
},
30+
"children": [],
31+
"id": "84331435"
32+
}
33+
```

‎documents/tinyengine/carousel.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# TinyVue carousel 组件生成 schema
2+
3+
TinyCarousel是一个走马灯组件。
4+
componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。
5+
componentName 为 TinyCarouselItem 的组件， 通过对应的 title 属性，可以设置标题。 通过对应的 name 属性，可以设置唯一标识， 通过对应的 indicator-position 属性，可以设置指示器位置。可选值为 outside 和 none。
6+
7+
## carousel 组件生成 schema 代码示例
8+
9+
### 基本用法
10+
11+
```json
12+
{
13+
"componentName": "TinyCarousel",
14+
"props": {
15+
"height": "180px", // 设置走马灯的高度。
16+
"className": "component-base-style",
17+
"arrow": "always", // 可以设置切换箭头的显示效果。默认值为 hover， 可选值为 always 、 hover 和 never。
18+
"autoplay": true, // 可以设置是否自动切换。
19+
"indicator-position": "outside", // 可以设置指示器位置。可选值为 outside 和 none。
20+
"initial-index": 0, // 可以设置初始状态激活的幻灯片的索引。
21+
"interval": 5000, // 可以设置自动切换的时间间隔，单位为毫秒。
22+
"loop": true, // 可以设置是否循环显示。
23+
"show-title": true, // 可以设置是否显示标题。
24+
"trigger": "hover", // 可以设置指示器的触发方式。默认值为 hover，可选值为 hover 和 click。
25+
"type": "card", // 可以设置走马灯的类型。默认值为 horizontal，可选值为 horizontal 、 vertical 和 card。
26+
"ref": "carousel", // 可以设置需要的ref引用类名。
27+
// 走马灯的事件，包括 onChange（值被改变时触发）、onFocus（获得焦点时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值
28+
"onClick": {
29+
"type": "JSExpression",
30+
"value": "this.onClickNew"
31+
}
32+
},
33+
"children": [
34+
{
35+
"componentName": "TinyCarouselItem",
36+
"props": {
37+
"title": "carousel-item-a"
38+
},
39+
"children": [
40+
{
41+
"componentName": "div",
42+
"props": {
43+
"style": "margin:10px 0 0 30px"
44+
},
45+
"id": "614d4146"
46+
}
47+
],
48+
"id": "2366c336"
49+
},
50+
{
51+
"componentName": "TinyCarouselItem",
52+
"props": {
53+
"title": "carousel-item-b"
54+
},
55+
"children": [
56+
{
57+
"componentName": "div",
58+
"props": {
59+
"style": "margin:10px 0 0 30px"
60+
},
61+
"id": "1732256d"
62+
}
63+
],
64+
"id": "442457ef"
65+
}
66+
],
67+
"id": "231c8a63"
68+
}
69+
```

‎documents/tinyengine/checkbox.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# TinyVue checkout 组件生成 schema
2+
3+
TinyCheckbox是一个多选框组件。
4+
componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。
5+
6+
## checkout 组件生成 schema 代码示例
7+
8+
### 基本用法
9+
10+
```json
11+
{
12+
"componentName": "TinyCheckbox",
13+
"props": {
14+
"text": "复选框文案",
15+
"className": "component-base-style",
16+
"disabled": false, // 可通过 disabled 属性设置复选框是否禁用。
17+
"checked": true, // 可通过 checked 属性设置复选框是否勾选。
18+
"text": "复选框文案", // 可通过 text 属性设置复选框的描述文本。
19+
"border": true, // 可通过 border 属性设置复选框是否有边框。
20+
"true-label": "真文本", // 通过 true-label 属性设置选中的值。
21+
"false-label": "假文本", // 通过 false-label 属性设置选中的值。
22+
"onUpdate:modelValue": {
23+
"type": "JSExpression",
24+
"value": "this.onUpdate_modelValueNew"
25+
} // 复选框的事件，包括 onChange（值被改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onFocus（获得焦点时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值
26+
},
27+
"children": [],
28+
"id": "e4636442"
29+
}
30+
```

‎documents/tinyengine/h1.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Heading 组件生成schema
2+
3+
## Heading 组件生成schema代码示例
4+
5+
### 基本用法
6+
7+
可配置 children 来展示对应的标题内容
8+
9+
```json
10+
{
11+
"componentName": "h1",
12+
"props": {
13+
"className": "component-base-style"
14+
},
15+
"children": "Heading",
16+
"id": "3261c636"
17+
}
18+
```
19+
20+
### 标题类型
21+
22+
标题分为 h1（一级标题）、h2（二级标题）、h3（三级标题）、h4（四级标题）、h5（五级标题）、h6（六级标题），通过配置 componentName 生成对应的标题
23+
24+
```json
25+
{
26+
"componentName": "h1",
27+
"props": {
28+
"className": "component-base-style"
29+
},
30+
"children": "Heading",
31+
"id": "3261c636"
32+
}
33+
```
34+
35+
### 设置样式
36+
37+
通过对应的 style 属性，可以设置需要的样式。
38+
39+
```json
40+
{
41+
"componentName": "h1",
42+
"props": {
43+
"className": "component-base-style",
44+
"style": "color: #f000f0;"
45+
},
46+
"children": "Heading",
47+
"id": "3261c636"
48+
}
49+
```
50+
51+
### 设置ref
52+
53+
通过对应的 ref 属性，可以设置需要的ref引用类名。
54+
55+
```json
56+
{
57+
"componentName": "h1",
58+
"props": {
59+
"className": "component-base-style",
60+
"style": "color: #f000f0;",
61+
"ref": "heading"
62+
},
63+
"children": "Heading",
64+
"id": "3261c636"
65+
}
66+
```
67+
68+
### id属性
69+
70+
通过对应的 id 属性，可以设置元素id值。
71+
72+
```json
73+
{
74+
"componentName": "h1",
75+
"props": {
76+
"className": "component-base-style",
77+
"id": "heading"
78+
},
79+
"children": "Heading",
80+
"id": "3261c636"
81+
}
82+
```

‎documents/tinyengine/icon.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# icon 组件生成schema
2+
3+
Icon是一个图标组件。
4+
componentName为渲染时候的组件名称，props为组件绑定的属性，children为子组件列表，id为可以动态生成的唯一id。
5+
6+
## icon 组件生成schema代码示例
7+
8+
```json
9+
{
10+
"componentName": "Icon",
11+
"props": {
12+
"name": "IconDel",
13+
"className": "component-base-style", // 可通过 name 属性设置图标名称，IconDel（删除），IconChevronRight（向右），IconChevronLeft（向左），IconSmile（笑脸），IconMobileView（手机），IconTelephone（电话），IconLanguage（国际化），IcoSearch（搜索）
14+
"style": "color: #f0f00f;" // 通过对应的 style 属性，可以设置需要的样式。
15+
},
16+
"children": [],
17+
"id": "5e4451af"
18+
}
19+
```
20+

‎documents/tinyengine/input.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# TinyVue input 组件生成 schema
2+
3+
TinyInput 是一个输入框组件。
4+
componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。
5+
6+
## input 组件生成 schema 代码示例
7+
8+
### 基本用法
9+
10+
```json
11+
{
12+
"componentName": "TinyInput",
13+
"props": {
14+
"placeholder": "请输入",
15+
"modelValue": "",
16+
"className": "component-base-style",
17+
"clearable": true, // 可通过 clearable 属性设置输入框显示清空图标按钮
18+
"disabled": false, // 可通过 disabled 属性设置输入框是否禁用。
19+
"type": "text", // 通过对应的 type 属性，可以设置为对应的类型。默认为 text，可选值为 text、 textarea 和 password。
20+
"size": "medium", // 可通过 size 属性设置尺寸大小，可选值：medium / small / mini。注意： 只在type!="textarea"时有效。
21+
"modelValue": {
22+
"type": "JSExpression",
23+
"value": "this.state.inputData",
24+
"model": true
25+
}, // 通过配置对应的 modelValue 属性，modelValue中的value是设置文本的绑定值，取this.state下对应的参数值。
26+
"onUpdate:modelValue": {
27+
"type": "JSExpression",
28+
"value": "this.onUpdate_modelValueNew"
29+
} // 输入框的事件，包括 onChange（值被改变时触发）、onInput（输入值改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onBlur（失去焦点时触发）、onFocus（获得焦点时触发）、onClear（点击清空按钮时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值
30+
},
31+
"children": [],
32+
"id": "12731335"
33+
}
34+
```

‎documents/tinyengine/radio.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# TinyVue radio 组件生成 schema
2+
3+
TinyRadio是一个单选框组件。
4+
componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。
5+
6+
## radio 组件生成 schema 代码示例
7+
8+
### 基本用法
9+
10+
```json
11+
{
12+
"componentName": "TinyRadio",
13+
"props": {
14+
"label": "1",
15+
"text": "单选文本", // 可通过 text 属性设置文本内容， label 属性设置选中值
16+
"className": "component-base-style",
17+
"disabled": true, // 可通过 disabled 属性设置单选框是否禁用。
18+
"border": true, // 可通过 border 属性设置是否显示边框。
19+
"size": "medium", // 可通过 size 属性设置尺寸大小，可选值：medium / small / mini。
20+
"name": "radio", // 可通过 name 属性设置 原生name属性
21+
"onUpdate:modelValue": {
22+
"type": "JSExpression",
23+
"value": "this.onUpdate_modelValueNew"
24+
} // 单选框的事件，包括 onChange（值被改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onFocus（获得焦点时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值
25+
},
26+
"children": [],
27+
"id": "26723552"
28+
}
29+
```

0 commit comments

Comments
 (0)