Skip to content

Commit 9ee9a36

Browse files
wbs99wbs99
committed
忽略 dist 目录
1 parent 7858d5b commit 9ee9a36

28 files changed

+271
-191
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
node_modules
22
.DS_Store
3-
dist
3+
/dist
44
*.local

‎markdown/intro.md

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
# 介绍
22

3-
Good UI 是一款基于 Vue 3 和 TypeScript 的 UI 组件库。
3+
`Good UI` 是一款基于 `Vue 3` 和 `TypeScript` 的 `UI` 组件库。
44

5-
这款组件库其实是我为了总结自己这几年的技术经验而写的，全程亲手编写，尽量不采用第三方库，包括你现在看到的这个官网也几乎都是我自己写的。
5+
全程亲手编写，尽量不采用第三方库，包括你现在看到的这个官网也几乎都是我自己写的。
66

7-
所以如果强烈不建议你将此 UI 库用于生产环境。但如果你是抱着看源代码的目的来的，那么这个库还是值得一看的。源代码放在了 https://github.com/wbs99, 历史提交信息非常规范，你可以按提交的顺序逐个查看；你也可以直接查看每个组件的源代码和示例，运行方法见 README.md。
7+
这个 `UI` 组件库只是我在学习 `Vue3` 过程中复习巩固所学知识，为了更好的理解 `Vue3` 一些原理，所以强烈不建议你将此 `UI` 库用于生产环境。
8+
9+
但如果你是抱着看源代码的目的来的，那么这个库还是值得一看的。
10+
11+
源代码放在了 https://github.com/wbs99, 历史提交信息非常规范，你可以按提交的顺序逐个查看。
12+
13+
你也可以直接查看每个组件的源代码和示例，运行方法见 README.md。
814

915
下一节：[安装](#/doc/install)

‎public/favicon.ico

1.24 KB
Binary file not shown.

‎src/components/Demo.vue ‎src/code-demo/Demo.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<component :is="component" />
66
</div>
77
<div class="demo-actions">
8-
<Button @click="toggleCode">查看代码</Button>
8+
<Button @click="toggleCode">查看 / 隐藏代码</Button>
99
</div>
1010
<div class="demo-code" v-if="codeVisible">
1111
<pre class="language-html" v-html="html" />
@@ -17,7 +17,7 @@
1717
<script lang="ts">
1818
import Button from '../lib/Button.vue'
1919
import 'prismjs';
20-
import 'prismjs/themes/prism.css'
20+
import 'prismjs/themes/prism-coy.css'
2121
import {
2222
computed,
2323
ref

‎src/code-demo/button-demo/Button1.demo.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<demo>
2+
常规使用
3+
</demo>
4+
5+
<template>
6+
<div>
7+
<Button>默认按钮</Button>
8+
<Button theme="link">链接按钮</Button>
9+
<Button theme="text">文本按钮</Button>
10+
</div>
11+
</template>
12+
13+
<script lang="ts">
14+
import Button from '../../lib/Button.vue';
15+
16+
export default {
17+
components: {Button}
18+
};
19+
</script>

‎src/code-demo/button-demo/Button2.demo.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<demo>
2+
按钮尺寸
3+
</demo>
4+
<template>
5+
<div>
6+
<div>
7+
<Button size="big">大大大</Button>
8+
<Button>普普通</Button>
9+
<Button size="small">小小小</Button>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script lang="ts">
15+
import Button from "../../lib/Button.vue";
16+
export default {
17+
components: {
18+
Button
19+
}
20+
}
21+
</script>

‎src/code-demo/button-demo/Button3.demo.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<demo>
2+
支持 level
3+
</demo>
4+
<template>
5+
<div>
6+
<div>
7+
<Button level="main">主要按钮</Button>
8+
<Button level="danger">危险按钮</Button>
9+
<Button level="warning">警告按钮</Button>
10+
<Button level="success">成功按钮</Button>
11+
<Button>普通按钮</Button>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script lang="ts">
17+
import Button from '../../lib/Button.vue';
18+
19+
export default {
20+
components: {
21+
Button
22+
}
23+
};
24+
</script>

‎src/components/Button4.demo.vue ‎src/code-demo/button-demo/Button4.demo.vue

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@
33
</demo>
44
<template>
55
<Button disabled>禁用按钮</Button>
6-
<Button theme="link" disabled>禁用链接按钮</Button>
7-
<Button theme="text" disabled>禁用按钮</Button>
86
</template>
97

108
<script lang="ts">
11-
import Button from "../lib/Button.vue";
9+
import Button from "../../lib/Button.vue";
1210
export default {
1311
components: {
1412
Button

‎src/components/Button5.demo.vue ‎src/code-demo/button-demo/Button5.demo.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</template>
1010

1111
<script lang="ts">
12-
import Button from "../lib/Button.vue";
12+
import Button from "../../lib/Button.vue";
1313
export default {
1414
components: {
1515
Button

‎src/components/ButtonDemo.vue ‎src/code-demo/button-demo/ButtonDemo.vue

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<template>
2-
<div>Button 示例</div>
2+
<h1>Button 按钮</h1>
33
<Demo :component="Button1Demo"/>
4+
<h4>按钮有大、中、小三种尺寸。通过设置 size 为 big small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中</h4>
45
<Demo :component="Button2Demo"/>
6+
<h4>使用 level 属性，用不同颜色代码不同 level 的按钮。若不设置 level ，则为普通按钮</h4>
57
<Demo :component="Button3Demo"/>
8+
<h4>禁用按钮，点击无反应</h4>
69
<Demo :component="Button4Demo"/>
10+
<h4>加载中按钮，loading 属性表示正在加载</h4>
711
<Demo :component="Button5Demo"/>
812
</template>
913

1014
<script lang='ts'>
11-
import Button from '../lib/Button.vue';
12-
import Demo from './Demo.vue';
15+
import Button from '../../lib/Button.vue';
16+
import Demo from '../Demo.vue';
1317
import Button1Demo from './Button1.demo.vue';
1418
import Button2Demo from './Button2.demo.vue';
1519
import Button3Demo from './Button3.demo.vue';
@@ -26,8 +30,4 @@ export default {
2630
return {onClick, Button1Demo, Button2Demo, Button3Demo, Button4Demo, Button5Demo};
2731
}
2832
};
29-
</script>
30-
31-
<style lang='scss' scoped>
32-
33-
</style>
33+
</script>

‎src/components/Dialog1.demo.vue ‎src/code-demo/dialog-demo/Dialog1.demo.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
</template>
1919

2020
<script lang='ts'>
21-
import Dialog from '../lib/Dialog.vue';
22-
import Button from '../lib/Button.vue';
21+
import Dialog from '../../lib/Dialog.vue';
22+
import Button from '../../lib/Button.vue';
2323
import {ref} from 'vue';
2424
2525
export default {

‎src/components/Dialog2.demo.vue ‎src/code-demo/dialog-demo/Dialog2.demo.vue

+4-8
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
</demo>
44
<template>
55
<div>
6-
<Button @click="showDialog">一句话打开对话框</Button>
6+
<Button @click="showDialog">一键打开对话框</Button>
77
</div>
88
</template>
99

1010
<script lang='ts'>
11-
import Button from '../lib/Button.vue';
12-
import {openDialog} from '../lib/openDialog';
11+
import Button from '../../lib/Button.vue';
12+
import {openDialog} from '../../lib/openDialog';
1313
1414
export default {
1515
components: {
@@ -31,8 +31,4 @@ export default {
3131
return { showDialog};
3232
}
3333
};
34-
</script>
35-
36-
<style lang='scss' scoped>
37-
38-
</style>
34+
</script>

‎src/code-demo/dialog-demo/Dialog3.demo.vue

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<demo>
2+
常规用法
3+
</demo>
4+
<template>
5+
<div>
6+
<Button @click="toggle">显示对话框</Button>
7+
<Dialog v-model:visible="x" :closeOnClickOverlay="true"
8+
:ok="f1">
9+
<template v-slot:title>
10+
<strong>标题</strong>
11+
</template>
12+
<template v-slot:content>
13+
<strong>加粗的内容</strong>
14+
<div>普通的内容</div>
15+
</template>
16+
</Dialog>
17+
</div>
18+
</template>
19+
20+
<script lang='ts'>
21+
import Dialog from '../../lib/Dialog.vue';
22+
import Button from '../../lib/Button.vue';
23+
import {ref} from 'vue';
24+
25+
export default {
26+
components: {
27+
Button,
28+
Dialog
29+
},
30+
setup() {
31+
const x = ref(false);
32+
const toggle = () => {
33+
x.value = !x.value;
34+
};
35+
const f1 = () => {
36+
return true;
37+
};
38+
39+
return {x, toggle, f1, };
40+
}
41+
};
42+
</script>

‎src/code-demo/dialog-demo/DialogDemo.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<h1>Dialog 对话框</h1>
3+
<h4>不能通过遮罩层关闭对话框，必须输入内容才可以通过确定关闭对话框</h4>
4+
<Demo :component="Dialog1Demo"/>
5+
<h4>可以通过遮罩层关闭对话框，不输入内容也可以通过确定关闭对话框</h4>
6+
<Demo :component="Dialog3Demo"/>
7+
<h4>引入 openDialog 打开一个 dialog</h4>
8+
<Demo :component="Dialog2Demo"/>
9+
10+
</template>
11+
12+
<script lang='ts'>
13+
import Demo from '../Demo.vue';
14+
import Dialog1Demo from './Dialog1.demo.vue'
15+
import Dialog2Demo from './Dialog2.demo.vue'
16+
import Dialog3Demo from './Dialog3.demo.vue'
17+
18+
19+
20+
export default {
21+
components: {
22+
Demo,
23+
},
24+
setup() {
25+
return {Dialog1Demo,Dialog2Demo,Dialog3Demo};
26+
}
27+
};
28+
</script>

‎src/components/Switch1.demo.vue ‎src/code-demo/switch-demo/Switch1.demo.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</template>
88

99
<script lang="ts">
10-
import Switch from '../lib/Switch.vue'
10+
import Switch from '../../lib/Switch.vue'
1111
import {
1212
ref
1313
} from 'vue'

‎src/components/Switch2.demo.vue ‎src/code-demo/switch-demo/Switch2.demo.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
支持 disabled
33
</demo>
44
<template>
5-
<Switch v-model:value="bool" disabled />
5+
<Switch v-model:value="bool" disabled/>
66
</template>
77

88
<script lang="ts">
9-
import Switch from '../lib/Switch.vue'
9+
import Switch from '../../lib/Switch.vue'
1010
import {
1111
ref
1212
} from 'vue'

‎src/components/SwitchDemo.vue ‎src/code-demo/switch-demo/SwitchDemo.vue

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<template>
22
<div>
33
<h1>Switch 组件示例 </h1>
4-
<Demo :component="Switch1Demo" />
5-
<Demo :component="Switch2Demo" />
4+
<Demo :component="Switch1Demo"/>
5+
<h4>用 disabled 实现禁用 switch 的功能</h4>
6+
<Demo :component="Switch2Demo"/>
67
</div>
78
</template>
89

910
<script lang="ts">
10-
import Switch1Demo from './Switch1.demo.vue'
11-
import Switch2Demo from './Switch2.demo.vue'
12-
import Demo from './Demo.vue'
11+
import Switch1Demo from './Switch1.demo.vue';
12+
import Switch2Demo from './Switch2.demo.vue';
13+
import Demo from '../Demo.vue';
14+
1315
export default {
1416
components: {
1517
Demo
@@ -18,9 +20,9 @@ export default {
1820
return {
1921
Switch1Demo,
2022
Switch2Demo,
21-
}
23+
};
2224
}
23-
}
25+
};
2426
</script>
2527

2628
<style lang='scss' scoped>

‎src/components/Tabs1.demo.vue ‎src/code-demo/tabs-demo/Tabs1.demo.vue

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
</demo>
44
<template>
55
<Tabs v-model:selected="x">
6-
<Tab title="导航1">内容1</Tab>
7-
<Tab title="导航2">内容2</Tab>
6+
<Tab title="Tabs1">Tabs1 的内容</Tab>
7+
<Tab title="Tabs2">Tab2 的内容</Tab>
8+
<Tab title="Tabs3">Tab3 的内容</Tab>
89
</Tabs>
910
</template>
1011

1112
<script lang="ts">
12-
import Tabs from '../lib/Tabs.vue'
13-
import Tab from '../lib/Tab.vue'
13+
import Tabs from '../../lib/Tabs.vue'
14+
import Tab from '../../lib/Tab.vue'
1415
import {
1516
ref
1617
} from 'vue'
@@ -20,7 +21,7 @@ export default {
2021
Tab
2122
},
2223
setup() {
23-
const x = ref('导航2')
24+
const x = ref('Tabs2')
2425
return {
2526
x
2627
}

‎src/components/TabsDemo.vue ‎src/code-demo/tabs-demo/TabsDemo.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<h1>Tabs 示例</h1>
2+
<h1>Tabs 标签页</h1>
33
<Demo :component="Tabs1Demo" />
44
</template>
55

66
<script lang="ts">
7-
import Demo from './Demo.vue'
7+
import Demo from '../Demo.vue'
88
import Tabs1Demo from './Tabs1.demo.vue'
99
export default {
1010
components: {

0 commit comments

Comments
 (0)