Skip to content

Commit 5f559d8

Browse files
DanielShuguangDanielShuguang
committed
first commit
1 parent 567f990 commit 5f559d8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+18037
-3950
lines changed

‎.eslintrc.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ module.exports = {
1313
},
1414
rules: {
1515
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16-
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17+
'space-before-function-paren': 'off',
18+
'@typescript-eslint/member-delimiter-style': 'off'
1719
},
1820
overrides: [
1921
{

‎.prettierrc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"trailingComma": "none",
3+
"tabWidth": 2,
4+
"semi": false,
5+
"singleQuote": true,
6+
"printWidth": 80
7+
}

‎package-lock.json

+2,699-3,855
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+15-12
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,34 @@
99
"lint": "vue-cli-service lint"
1010
},
1111
"dependencies": {
12+
"@types/classnames": "^2.2.11",
13+
"classnames": "^2.2.6",
1214
"core-js": "^3.6.5",
13-
"vue": "^3.0.0"
15+
"dayjs": "^1.9.4",
16+
"vue": "^3.0.2"
1417
},
1518
"devDependencies": {
1619
"@types/jest": "^24.0.19",
1720
"@typescript-eslint/eslint-plugin": "^2.33.0",
1821
"@typescript-eslint/parser": "^2.33.0",
19-
"@vue/cli-plugin-babel": "~4.5.0",
20-
"@vue/cli-plugin-eslint": "~4.5.0",
21-
"@vue/cli-plugin-typescript": "~4.5.0",
22+
"@vue/cli-plugin-babel": "^4.5.8",
23+
"@vue/cli-plugin-eslint": "^4.5.8",
24+
"@vue/cli-plugin-typescript": "^4.5.8",
2225
"@vue/cli-plugin-unit-jest": "~4.5.0",
23-
"@vue/cli-service": "~4.5.0",
24-
"@vue/compiler-sfc": "^3.0.0",
26+
"@vue/cli-service": "^4.5.8",
27+
"@vue/compiler-sfc": "^3.0.2",
2528
"@vue/eslint-config-standard": "^5.1.2",
2629
"@vue/eslint-config-typescript": "^5.0.2",
27-
"@vue/test-utils": "^2.0.0-0",
30+
"@vue/test-utils": "^2.0.0-beta.7",
2831
"eslint": "^6.7.2",
2932
"eslint-plugin-import": "^2.20.2",
3033
"eslint-plugin-node": "^11.1.0",
3134
"eslint-plugin-promise": "^4.2.1",
32-
"eslint-plugin-standard": "^4.0.0",
33-
"eslint-plugin-vue": "^7.0.0-0",
34-
"node-sass": "^4.12.0",
35-
"sass-loader": "^8.0.2",
35+
"eslint-plugin-standard": "^4.0.2",
36+
"eslint-plugin-vue": "^7.1.0",
37+
"less": "^3.12.2",
38+
"less-loader": "^7.0.2",
3639
"typescript": "~3.9.3",
37-
"vue-jest": "^5.0.0-0"
40+
"vue-jest": "^5.0.0-alpha.5"
3841
}
3942
}

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="zh-CN">
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">

‎src/App.vue

+104-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,114 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
3-
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
2+
<div class="app">
3+
<img alt="Vue logo" src="./assets/logo.png" />
4+
<my-button type="primary" @click="clickButton" round>确定按钮</my-button>
5+
<my-select @change="changeSelect" editable v-model="selected">
6+
<my-option
7+
v-for="item in options"
8+
:key="item.value"
9+
:value="item.value"
10+
:label="item.label"
11+
:disabled="item.value === '4'"
12+
/>
13+
</my-select>
14+
<MyInput v-model="inputValue" />
15+
<my-checkbox disabled v-model="radioVal">勾选框</my-checkbox>
16+
<my-form ref="formRef" :model="formData" :rules="rules">
17+
<form-item label="表单内容1" prop="input">
18+
<my-input v-model="formData.input" />
19+
</form-item>
20+
<form-item label="内容2" prop="input2">
21+
<my-input v-model="formData.input2" />
22+
</form-item>
23+
<form-item label="表单内容3" prop="input3">
24+
<my-input v-model="formData.input3" />
25+
</form-item>
26+
</my-form>
27+
<my-button @click="submit">submit</my-button>
28+
</div>
429
</template>
530

631
<script lang="ts">
7-
import { defineComponent } from 'vue'
8-
import HelloWorld from './components/HelloWorld.vue'
32+
import { defineComponent, reactive, ref, onMounted, onUpdated, DefineComponent } from 'vue'
33+
import MyButton from '@/components/button/Button.vue'
34+
import MySelect from '@/components/select/Select.vue'
35+
import MyInput from '@/components/input/Input.vue'
36+
import MyOption from '@/components/select/Option.vue'
37+
import MyCheckbox from '@/components/checkBox/Checkbox.vue'
38+
import { OptionProps } from './typings/ISelect'
39+
import MyForm from './components/form/Form.vue'
40+
import FormItem from './components/form/FormItem.vue'
41+
import { IFormRule } from './typings/IForm'
942
1043
export default defineComponent({
1144
name: 'App',
1245
components: {
13-
HelloWorld
46+
MyButton,
47+
MySelect,
48+
MyInput,
49+
MyOption,
50+
MyCheckbox,
51+
MyForm,
52+
FormItem
53+
},
54+
setup() {
55+
const selected = ref('')
56+
const options = reactive<OptionProps[]>([])
57+
const inputValue = ref('')
58+
const radioVal = ref(false)
59+
const formData = reactive({
60+
input: '',
61+
input2: '',
62+
input3: ''
63+
})
64+
const formRef = ref<DefineComponent | null>(null)
65+
const rules = reactive<Record<string, IFormRule>>({
66+
input: { type: 'required', message: '必填' },
67+
input2: { type: 'required', message: '必填' },
68+
input3: { type: 'required', message: '必填' }
69+
})
70+
71+
function changeSelect() {
72+
console.log('change', selected.value)
73+
}
74+
75+
function clickButton(ev: MouseEvent) {
76+
console.log(ev)
77+
}
78+
const submit = () => {
79+
if (formRef.value) {
80+
const result: boolean = formRef.value.formValidate()
81+
console.log(formRef.value, result)
82+
}
83+
}
84+
85+
onUpdated(() => {
86+
// console.log('selected', selected.value)
87+
// console.log('radio', radioVal.value)
88+
})
89+
onMounted(() => {
90+
for (let i = 1; i < 20; i++) {
91+
options.push({ value: i.toString(), label: '选项' + i })
92+
}
93+
})
94+
95+
return {
96+
selected,
97+
options,
98+
inputValue,
99+
radioVal,
100+
changeSelect,
101+
clickButton,
102+
formData,
103+
rules,
104+
formRef,
105+
submit
106+
}
14107
}
15108
})
16109
</script>
17110

18-
<style lang="scss">
111+
<style lang="less">
19112
#app {
20113
font-family: Avenir, Helvetica, Arial, sans-serif;
21114
-webkit-font-smoothing: antialiased;
@@ -24,4 +117,9 @@ export default defineComponent({
24117
color: #2c3e50;
25118
margin-top: 60px;
26119
}
120+
.app {
121+
> * {
122+
margin-right: 20px;
123+
}
124+
}
27125
</style>

‎src/assets/styles/base.less

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
html,
2+
body,
3+
div,
4+
span,
5+
applet,
6+
object,
7+
iframe,
8+
h1,
9+
h2,
10+
h3,
11+
h4,
12+
h5,
13+
h6,
14+
p,
15+
blockquote,
16+
pre,
17+
a,
18+
abbr,
19+
acronym,
20+
address,
21+
big,
22+
cite,
23+
code,
24+
del,
25+
dfn,
26+
em,
27+
img,
28+
ins,
29+
kbd,
30+
q,
31+
s,
32+
samp,
33+
small,
34+
strike,
35+
strong,
36+
sub,
37+
sup,
38+
tt,
39+
var,
40+
b,
41+
u,
42+
i,
43+
center,
44+
dl,
45+
dt,
46+
dd,
47+
ol,
48+
ul,
49+
li,
50+
fieldset,
51+
form,
52+
label,
53+
legend,
54+
table,
55+
caption,
56+
tbody,
57+
tfoot,
58+
thead,
59+
tr,
60+
th,
61+
td,
62+
article,
63+
aside,
64+
canvas,
65+
details,
66+
embed,
67+
figure,
68+
figcaption,
69+
footer,
70+
header,
71+
hgroup,
72+
menu,
73+
nav,
74+
output,
75+
ruby,
76+
section,
77+
summary,
78+
time,
79+
mark,
80+
audio,
81+
video {
82+
margin: 0;
83+
padding: 0;
84+
border: 0;
85+
font-size: 100%;
86+
font: inherit;
87+
vertical-align: baseline;
88+
}
89+
/* HTML5 display-role reset for older browsers */
90+
article,
91+
aside,
92+
details,
93+
figcaption,
94+
figure,
95+
footer,
96+
header,
97+
hgroup,
98+
menu,
99+
nav,
100+
section {
101+
display: block;
102+
}
103+
body {
104+
line-height: 1;
105+
}
106+
ol,
107+
ul {
108+
list-style: none;
109+
}
110+
blockquote,
111+
q {
112+
quotes: none;
113+
}
114+
blockquote:before,
115+
blockquote:after,
116+
q:before,
117+
q:after {
118+
content: '';
119+
content: none;
120+
}
121+
table {
122+
border-collapse: collapse;
123+
border-spacing: 0;
124+
}
125+
* {
126+
outline: none;
127+
box-sizing: border-box;
128+
}

‎src/assets/styles/font-awesome/css/font-awesome.min.css

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/styles/font-awesome/fonts/FontAwesome.otf

132 KB
Binary file not shown.

‎src/assets/styles/font-awesome/fonts/fontawesome-webfont.eot

162 KB
Binary file not shown.

0 commit comments

Comments
 (0)