Skip to content

Commit c7b1eb0

Browse files
bluezhanbluezhan
committed
feat: select components
1 parent 1b5d5e8 commit c7b1eb0

File tree

9 files changed

+205
-34
lines changed

9 files changed

+205
-34
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ounce",
33
"version": "0.1.0",
4-
"description": "vue3 uikit",
4+
"description": "Ounce UI is a Vue3-based UI toolkit for the web.",
55
"main": "index.js",
66
"private": true,
77
"scripts": {
@@ -68,4 +68,4 @@
6868
"typescript": "~3.9.7",
6969
"vue-cli-plugin-vue-next": "~0.1.3"
7070
}
71-
}
71+
}

‎sources/vue.config-配置详解.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ let path = require('path')
33
function resolve(dir) {
44
return path.join(__dirname, dir)
55
}
6+
67
module.exports = {
7-
publicPath: '/wuhan', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致
8+
publicPath: '/ounce', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致
89
outputDir: 'dist3', //打包路径地址,Default: 'dist' ,代替 output.path
910
assetsDir: 'assets1', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
1011
indexPath: 'test.html', //静态模板文件输出的地址
@@ -47,7 +48,7 @@ module.exports = {
4748
},
4849
devServer: {
4950
host: '0.0.0.0',
50-
port: '8090',
51+
port: '8080',
5152
https: true,
5253
// 访问 ： http://localhost:8090/api/info
5354
// 代理到 http://localhost:8081/api/info
@@ -73,4 +74,5 @@ module.exports = {
7374
}
7475

7576
// 参考网站：
76-
// https://cli.vuejs.org/config/
77+
// https://cli.vuejs.org/config/
78+
// https://cli.vuejs.org/zh/config/#vue-config-js

‎src/App.vue

+32-12
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,15 @@
33
<section class="wrapper">
44
<div class="panel">
55
<h1 class="title">
6-
Hello, my name<br />
7-
is Bruce Jenn
6+
Hello, my name
7+
<br />is Bruce Jenn
88
</h1>
99
<div class="content">
1010
<p>
11-
<strong> Ounce UI </strong>is a Vue3-based UI toolkit for the web.
12-
<br />
13-
14-
It is optimized for building complex, data-dense web interfaces for
15-
desktop applications which run in modern browsers and IE11. This is
16-
not a mobile-first UI toolkit.
11+
<strong>Ounce UI</strong> is a Vue3-based UI toolkit for the web.
12+
<br />It is optimized for building complex, data-dense web interfaces
13+
for desktop applications which run in modern browsers and IE11. This
14+
is not a mobile-first UI toolkit.
1715
</p>
1816
</div>
1917
</div>
@@ -22,15 +20,23 @@
2220
<h3 class="title">Buttons</h3>
2321
<div class="content">
2422
<OButton>this is button!</OButton>
25-
<OButton className="mlr" type="light">type="light" button!</OButton>
23+
<OButton class="mlr" type="light">type="light" button!</OButton>
2624
<OButton size="small">size="small" button!</OButton>
2725
</div>
2826
</div>
2927
<!-- input -->
3028
<div class="panel">
3129
<h3 class="title">Input</h3>
3230
<div class="content">
33-
<OInput label="name:" />
31+
<OInput className="w300" label="Name:" />
32+
<OInput className="w300 mtb" label="Email:" />
33+
</div>
34+
</div>
35+
<!-- select -->
36+
<div class="panel">
37+
<h3 class="title">Select</h3>
38+
<div class="content">
39+
<OSelect className="w300" label="Name:" />
3440
</div>
3541
</div>
3642
</section>
@@ -40,18 +46,32 @@
4046
import { defineComponent } from "vue";
4147
import GithubCorner from "./GithubCorner.vue";
4248
43-
import { OButton, OInput } from "@/components";
49+
import { OButton, OInput, OSelect } from "@/components";
4450
4551
export default defineComponent({
4652
name: "App",
4753
components: {
4854
GithubCorner,
4955
OButton,
5056
OInput,
57+
OSelect,
5158
},
5259
setup() {
5360
return {};
5461
},
5562
});
5663
</script>
57-
<style lang="scss"></style>
64+
<style lang="scss">
65+
.w100 {
66+
width: 100px;
67+
}
68+
.w200 {
69+
width: 200px;
70+
}
71+
.w300 {
72+
width: 300px;
73+
}
74+
.mtb {
75+
margin: 1em 0;
76+
}
77+
</style>

‎src/Template.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div></div>
3+
</template>
4+
5+
<script lang="ts">
6+
import { defineComponent } from "vue";
7+
export default defineComponent({
8+
name: "xxx", // entry u component name
9+
props: {
10+
className: {
11+
type: String,
12+
require: false,
13+
},
14+
size: {
15+
type: String,
16+
require: false,
17+
default: "middle", // "large" | "middle" | "small"
18+
},
19+
},
20+
// setup(props) {},
21+
});
22+
</script>
23+
24+
<style scoped>
25+
</style>

‎src/common/tools.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const genRandomString = (len = 5): string => {
2+
const text = "abcdefghijklmnopqrstuvwxyz0123456789";
3+
const rdmIndex = (text: string): number => (Math.random() * text.length) | 0;
4+
let rdmString = "";
5+
for (; rdmString.length < len; rdmString += text.charAt(rdmIndex(text)));
6+
return rdmString;
7+
};

‎src/components/Input.vue

+25-10
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
<template>
2-
<div>
3-
<label for="o-input-name">{{ label }}</label
4-
><input
5-
name="o-input-name"
2+
<div :class="className">
3+
<label :for="uniqueID">{{ label }}</label>
4+
<input
5+
:name="uniqueID"
6+
:id="uniqueID"
67
class="o-input"
78
type="text"
89
:class="[]"
9-
value=""
10-
placeholder="Jane Doe"
10+
value
11+
:placeholder="placeholder"
1112
/>
1213
</div>
1314
</template>
1415

1516
<script lang="ts">
16-
// as "button" | "submit" | "reset"
17-
// type: "button",
18-
// size: "small" large | middle | small,
1917
import { defineComponent } from "vue";
18+
19+
import { genRandomString } from "@/common/tools";
20+
2021
export default defineComponent({
2122
name: "OInput",
2223
props: {
24+
className: {
25+
type: String,
26+
require: false,
27+
},
2328
placeholder: {
2429
type: String,
2530
require: false,
31+
default: "pls enter ...",
2632
},
2733
label: {
2834
type: String,
@@ -39,7 +45,13 @@ export default defineComponent({
3945
},
4046
// text: String,
4147
},
42-
// setup(props) {},
48+
// setup(props) {
49+
setup() {
50+
const uniqueID = `o-input-${genRandomString()}`;
51+
return {
52+
uniqueID,
53+
};
54+
},
4355
});
4456
</script>
4557

@@ -69,6 +81,9 @@ label {
6981
line-height: 1.65;
7082
color: rgba(255, 255, 255, 0.75);
7183
}
84+
.o-input:focus {
85+
border-color: #ffe4b4;
86+
}
7287
::-webkit-input-placeholder {
7388
/* WebKit browsers */
7489
color: rgba(255, 255, 255, 0.25);

‎src/components/Select.vue

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div class="o-select" :class="className">
3+
<label :for="uniqueID">Category</label>
4+
<div class="o-select-wrapper">
5+
<select :name="uniqueID" :id="uniqueID">
6+
<option value="">-</option>
7+
<option value="1">Manufacturing</option>
8+
<option value="1">Shipping</option>
9+
<option value="1">Administration</option>
10+
<option value="1">Human Resources</option>
11+
</select>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script lang="ts">
17+
import { defineComponent } from "vue";
18+
import { genRandomString } from "@/common/tools";
19+
20+
export default defineComponent({
21+
name: "xxx", // entry u component name
22+
props: {
23+
className: {
24+
type: String,
25+
require: false,
26+
},
27+
size: {
28+
type: String,
29+
require: false,
30+
default: "middle", // "large" | "middle" | "small"
31+
},
32+
},
33+
// setup(props) {
34+
setup() {
35+
const uniqueID = `o-select-${genRandomString()}`;
36+
return {
37+
uniqueID,
38+
};
39+
},
40+
});
41+
</script>
42+
43+
<style scoped>
44+
.o-select {
45+
}
46+
.o-select label {
47+
color: rgba(255, 255, 255, 0.875);
48+
display: block;
49+
font-size: 0.8rem;
50+
font-weight: 700;
51+
margin: 0 0 0.4875rem 0;
52+
}
53+
.o-select-wrapper {
54+
text-decoration: none;
55+
display: block;
56+
position: relative;
57+
}
58+
.o-select-wrapper:before {
59+
display: block;
60+
content: "\f107";
61+
position: absolute;
62+
top: 0;
63+
right: 0;
64+
width: 2.5rem;
65+
height: 2.5rem;
66+
line-height: 2.5rem;
67+
color: rgba(255, 255, 255, 0.75);
68+
pointer-events: none;
69+
text-align: center;
70+
-webkit-font-smoothing: antialiased;
71+
font-family: FontAwesome;
72+
font-style: normal;
73+
font-weight: normal;
74+
text-transform: none !important;
75+
}
76+
.o-select-wrapper select {
77+
appearance: none;
78+
background: transparent;
79+
border: solid 2px rgba(255, 255, 255, 0.25);
80+
border-radius: 0.25rem;
81+
display: block;
82+
outline: 0;
83+
padding: 0 0.75rem;
84+
text-decoration: none;
85+
width: 100%;
86+
height: 2.5rem;
87+
color: rgba(255, 255, 255, 0.75);
88+
font-size: 1rem;
89+
font-weight: 300;
90+
line-height: 1.65;
91+
}
92+
.o-select-wrapper select:focus {
93+
border-color: #ffe4b4;
94+
}
95+
.o-select-wrapper select option {
96+
background-color: rgba(255, 255, 255, 0.875);
97+
color: #2e2b37;
98+
}
99+
</style>

‎src/components/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import OButton from "./Button.vue";
22
import OInput from "./Input.vue";
3+
import OSelect from "./Select.vue";
34

4-
export { OButton, OInput };
5+
export { OButton, OInput, OSelect };

‎vue.config.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
module.exports = {
2-
publicPath: "/ounce/",
2+
publicPath: process.env.NODE_ENV === "production" ? "/ounce/" : "",
33
// outputDir: "",
4-
// pages: {
5-
// index: {
6-
// title: 'Ounce ui',
7-
// }
8-
// }
4+
pages: {
5+
index: {
6+
entry: 'src/main.ts',
7+
template: 'public/index.html',
8+
title: 'Ounce ui - a Vue3-based UI toolkit for the web.',
9+
}
10+
}
911
};

0 commit comments

Comments
 (0)