Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
VueElementTemplate
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄瑜
VueElementTemplate
Commits
7b74808d
Commit
7b74808d
authored
7 years ago
by
胡小根
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'tmp' into haomo-master
parents
72fad2c9
44337f91
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
281 additions
and
139 deletions
+281
-139
HmComplexDetail.vue
src/views/haomo/components/details/HmComplexDetail.vue
+87
-0
index.vue
src/views/haomo/components/details/index.vue
+24
-10
HmComplexForm.vue
src/views/haomo/components/forms/HmComplexForm.vue
+150
-0
index.vue
src/views/haomo/components/forms/index.vue
+20
-129
No files found.
src/views/haomo/components/details/HmComplexDetail.vue
0 → 100644
View file @
7b74808d
<
template
>
<el-row
type=
"flex"
>
<el-col
:span=
"6"
><div></div></el-col>
<el-col
:span=
"12"
class=
"detail-content"
>
<h2
class=
"title"
>
详情页面
</h2>
<el-form
:model=
"detail"
ref=
"detail"
label-width=
"110px"
status-icon
style=
"width:80%;margin:0 auto"
>
<el-form-item
label=
"姓名"
prop=
"name"
>
<a
href=
"#"
>
{{
detail
.
name
}}
</a>
</el-form-item>
<el-form-item
label=
"性别"
prop=
"gender"
>
<div>
{{
detail
.
gender
}}
</div>
</el-form-item>
<el-form-item
label=
"年龄"
prop=
"age"
>
<div>
{{
detail
.
age
}}
</div>
</el-form-item>
<el-form-item
label=
"出生日期"
prop=
"date"
>
<div>
{{
detail
.
date
}}
</div>
</el-form-item>
<el-form-item
label=
"照片"
prop=
"img"
>
<img
style=
"width: 50px;"
:src=
detail.img
alt=
"..."
>
</el-form-item>
<el-form-item
label=
"学历"
prop=
"education"
>
<div>
{{
detail
.
education
}}
</div>
</el-form-item>
<el-form-item
label=
"最常用的网站"
prop=
"website"
>
<a
:href=
"detail.website"
>
{{
detail
.
website
}}
</a>
</el-form-item>
<el-form-item
label=
"最喜欢的颜色"
prop=
"color"
class=
"color"
>
<input
type=
"color"
v-model=
"detail.color"
style=
"width:200px;height:36px;border:none;outline:0"
/>
</el-form-item>
<el-form-item
label=
"手机号"
prop=
"phone"
>
<div>
{{
detail
.
phone
}}
</div>
</el-form-item>
<el-form-item
label=
"邮箱"
prop=
"email"
>
<div>
{{
detail
.
email
}}
</div>
</el-form-item>
<el-form-item
label=
"住址"
prop=
"address"
>
<div>
{{
detail
.
address
}}
</div>
</el-form-item>
</el-form>
</el-col>
<el-col
:span=
"6"
><div
></div></el-col>
</el-row>
</
template
>
<
script
>
export
default
{
name
:
'HmComplexDetail'
,
// 继承其他组件
extends
:
{},
// 使用其它组件
components
:
{},
data
()
{
return
{
detail
:
{
name
:
'haomokeji'
,
gender
:
'男'
,
age
:
'18'
,
password
:
'123456'
,
website
:
'https://www.baidu.com'
,
img
:
'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=936c94db60600c33e474d69a7b253a6a/5243fbf2b21193134871a87f6e380cd790238dcb.jpg'
,
date
:
'2018/02/06'
,
education
:
'本科'
,
color
:
'#ff0000'
,
phone
:
'18034935566'
,
email
:
'18034935566@gmail.com'
,
address
:
'北京市海淀区文思海辉大厦'
}
}
},
computed
:
{
},
filters
:
{
},
created
()
{
},
methods
:
{}
}
</
script
>
<
style
scoped
>
.title
{
text-align
:
center
;
}
.detail-content
{
background-color
:
#F8F8F8
;
}
</
style
>
This diff is collapsed.
Click to expand it.
src/views/haomo/components/details/index.vue
View file @
7b74808d
<
template
>
<
template
>
<transition
name=
"fade"
mode=
"out-in"
>
<div>
<keep-alive
:include=
'cachedViews'
>
<hm-complex-detail>
<router-view></router-view>
</hm-complex-detail>
</keep-alive>
</div>
</transition>
</
template
>
</
template
>
<
script
>
<
script
>
import
HmComplexDetail
from
'./HmComplexDetail.vue'
export
default
{
export
default
{
name
:
'ComponentsMain'
,
name
:
'HmComplexDetail'
,
// 继承其他组件
extends
:
{},
// 使用其它组件
components
:
{
'hm-complex-detail'
:
HmComplexDetail
},
data
()
{
return
{}
},
computed
:
{
computed
:
{
cachedViews
()
{
},
return
this
.
$store
.
state
.
tagsView
.
cachedViews
filters
:
{
}
},
}
created
()
{
},
methods
:
{}
}
}
</
script
>
</
script
>
<
style
scoped
>
</
style
>
This diff is collapsed.
Click to expand it.
src/views/haomo/components/forms/HmComplexForm.vue
0 → 100644
View file @
7b74808d
<
template
>
<el-row
type=
"flex"
class=
"hm-form"
>
<el-col
:span=
"6"
><div></div></el-col>
<el-col
:span=
"12"
style=
"border:1px solid orange"
><div>
<h2
class=
"title"
>
表单页面
</h2>
<el-form
:model=
"form"
ref=
"form"
:rules=
"rules"
label-width=
"110px"
status-icon
style=
"width:80%;margin:0 auto"
>
<el-form-item
label=
"姓名"
prop=
"name"
>
<el-input
type=
"text"
v-model=
"form.name"
autofocus
placeholder=
"请输入姓名"
></el-input>
</el-form-item>
<el-form-item
label=
"性别"
prop=
"gender"
>
<el-radio-group
v-model=
"form.gender"
>
<el-radio
label=
"男"
></el-radio>
<el-radio
label=
"女"
></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label=
"年龄"
prop=
"age"
>
<el-input
type=
"age"
v-model
.
number=
"form.age"
placeholder=
"请输入年龄"
></el-input>
</el-form-item>
<el-form-item
label=
"出生日期"
prop=
"date"
>
<el-date-picker
v-model=
"form.date"
type=
"date"
placeholder=
"选择日期"
></el-date-picker>
</el-form-item>
<el-form-item
label=
"照片"
prop=
"img"
>
<input
type=
"file"
>
</el-form-item>
<el-form-item
label=
"学历"
prop=
"education"
>
<el-select
v-model=
"form.education"
placeholder=
"请选择学历"
>
<el-option
label=
"博士"
value=
"doctor"
></el-option>
<el-option
label=
"硕士"
value=
"master"
></el-option>
<el-option
label=
"本科"
value=
"bachelor"
></el-option>
<el-option
label=
"专科"
value=
"professional"
></el-option>
<el-option
label=
"其他"
value=
"others"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"密码"
prop=
"password"
>
<el-input
type=
"password"
v-model=
"form.password"
placeholder=
"请输入密码"
></el-input>
</el-form-item>
<el-form-item
label=
"最常用的网站"
prop=
"website"
>
<el-input
type=
"url"
v-model=
"form.url"
placeholder=
"请输入网址"
></el-input>
</el-form-item>
<el-form-item
label=
"最喜欢的颜色"
prop=
"color"
class=
"color"
>
<input
type=
"color"
v-model=
"form.color"
style=
"width:200px;height:36px;border:none;outline:0"
/>
</el-form-item>
<el-form-item
label=
"手机号"
prop=
"phone"
>
<el-input
v-model
.
number=
"form.phone"
placeholder=
"请输入手机号"
></el-input>
</el-form-item>
<el-form-item
label=
"邮箱"
prop=
"email"
>
<el-input
v-model=
"form.email"
placeholder=
"请输入邮箱"
></el-input>
</el-form-item>
<el-form-item
label=
"住址"
prop=
"address"
>
<el-input
type=
"textarea"
placeholder=
"请填写地址"
:autosize=
"
{ minRows: 2, maxRows: 4}" resize="none" v-model="form.address">
</el-input>
</el-form-item>
<el-form-item>
<el-col
:span=
"12"
>
<el-button
type=
"primary"
@
click=
"onSubmit()"
>
确定
</el-button>
</el-col>
<el-col
:span=
"12"
>
<el-button
@
click=
"resetForm()"
>
重置
</el-button>
</el-col>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col
:span=
"6"
><div></div></el-col>
</el-row>
</
template
>
<
script
>
export
default
{
name
:
'HmComplexForm'
,
// 集成其他组件
extends
:
{},
// 使用其它组件
components
:
{},
// 混入公共对象
mixins
:
[],
props
:
{},
data
()
{
return
{
form
:
{
name
:
''
,
gender
:
'男'
,
age
:
''
,
password
:
''
,
website
:
''
,
img
:
''
,
date
:
''
,
education
:
''
,
color
:
'#ff0000'
,
phone
:
''
,
email
:
''
,
address
:
''
},
rules
:
{
name
:
[
{
required
:
true
,
message
:
'请输入姓名'
,
trigger
:
'blur'
},
{
min
:
2
,
max
:
5
,
message
:
'长度在 2 到 5 个字符'
,
trigger
:
'blur'
}
],
age
:
[
{
required
:
true
,
message
:
'请输入年龄'
,
trigger
:
'blur'
},
{
type
:
'number'
,
message
:
'年龄必须为数字'
,
trigger
:
'change'
}
],
website
:
[
{
required
:
true
,
message
:
'请输入网址'
,
trigger
:
'blur'
},
{
pattern
:
/
[
a-zA-z
]
+:
\/\/[^\s]
*/
,
message
:
'请输入正确的网址'
,
trigger
:
'change'
}
],
password
:
[
{
required
:
true
,
message
:
'请输入密码'
,
trigger
:
'blur'
},
{
pattern
:
/^
(?![
0-9
]
+$
)(?![
a-zA-Z
]
+$
)[
0-9A-Za-z
]{6,20}
$/
,
message
:
'密码必须同时包含数字和字母 6-20位'
,
trigger
:
'change'
}
],
phone
:
[
{
type
:
'number'
,
required
:
true
,
message
:
'请输入手机号'
,
trigger
:
'blur'
},
{
pattern
:
/^1
[
34578
]\d{9}
$/
,
message
:
'请输入正确的手机号'
,
trigger
:
'change'
}
],
email
:
[
{
required
:
true
,
message
:
'请输入邮箱地址'
,
trigger
:
'blur'
},
{
type
:
'email'
,
message
:
'请输入正确的邮箱地址'
,
trigger
:
'blur,change'
}
]
}
}
},
methods
:
{
// 提交
onSubmit
()
{
this
.
$refs
.
form
.
validate
((
valid
)
=>
{
if
(
valid
)
{
console
.
log
(
'提交成功!'
)
}
else
{
console
.
log
(
'提交失败!!'
)
return
false
}
})
},
// 重置
resetForm
()
{
this
.
$refs
.
form
.
resetFields
()
}
}
}
</
script
>
<
style
scoped
>
.title
{
line-height
:
40px
;
background
:
orange
;
color
:
#fff
;
text-align
:
center
;
margin-top
:
0
;
}
</
style
>
This diff is collapsed.
Click to expand it.
src/views/haomo/components/forms/index.vue
View file @
7b74808d
<
template
>
<
template
>
<div
class=
"form-wrapper"
>
<div>
<h2
class=
"title"
>
表单页面
</h2>
<hm-complex-form>
<el-form
:model=
"form"
ref=
"form"
:rules=
"rules"
label-width=
"110px"
status-icon
style=
"width:80%;margin:0 auto"
>
</hm-complex-form>
<el-form-item
label=
"姓名"
prop=
"name"
>
<el-input
type=
"text"
v-model=
"form.name"
autofocus
placeholder=
"请输入姓名"
></el-input>
</el-form-item>
<el-form-item
label=
"性别"
prop=
"gender"
>
<el-radio-group
v-model=
"form.gender"
>
<el-radio
label=
"男"
></el-radio>
<el-radio
label=
"女"
></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label=
"年龄"
prop=
"age"
>
<el-input
type=
"age"
v-model
.
number=
"form.age"
placeholder=
"请输入年龄"
></el-input>
</el-form-item>
<el-form-item
label=
"出生日期"
prop=
"date"
>
<el-date-picker
v-model=
"form.date"
type=
"date"
placeholder=
"选择日期"
></el-date-picker>
</el-form-item>
<el-form-item
label=
"照片"
prop=
"img"
>
<input
type=
"file"
>
</el-form-item>
<el-form-item
label=
"学历"
prop=
"education"
>
<el-select
v-model=
"form.education"
placeholder=
"请选择学历"
>
<el-option
label=
"博士"
value=
"doctor"
></el-option>
<el-option
label=
"硕士"
value=
"master"
></el-option>
<el-option
label=
"本科"
value=
"bachelor"
></el-option>
<el-option
label=
"专科"
value=
"professional"
></el-option>
<el-option
label=
"其他"
value=
"others"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"密码"
prop=
"password"
>
<el-input
type=
"password"
v-model=
"form.password"
placeholder=
"请输入密码"
></el-input>
</el-form-item>
<el-form-item
label=
"最常用的网站"
prop=
"website"
>
<el-input
type=
"url"
v-model=
"form.url"
placeholder=
"请输入网址"
></el-input>
</el-form-item>
<el-form-item
label=
"最喜欢的颜色"
prop=
"color"
class=
"color"
>
<input
type=
"color"
v-model=
"form.color"
style=
"width:200px;height:36px;border:none;outline:0"
/>
</el-form-item>
<el-form-item
label=
"手机号"
prop=
"phone"
>
<el-input
v-model
.
number=
"form.phone"
placeholder=
"请输入手机号"
></el-input>
</el-form-item>
<el-form-item
label=
"邮箱"
prop=
"email"
>
<el-input
v-model=
"form.email"
placeholder=
"请输入邮箱"
></el-input>
</el-form-item>
<el-form-item
label=
"住址"
prop=
"address"
>
<el-input
type=
"textarea"
placeholder=
"请填写地址"
:autosize=
"
{ minRows: 2, maxRows: 4}" resize="none" v-model="form.address">
</el-input>
</el-form-item>
<el-form-item>
<el-col
:span=
"12"
>
<el-button
type=
"primary"
@
click=
"onSubmit()"
>
确定
</el-button>
</el-col>
<el-col
:span=
"12"
>
<el-button
@
click=
"resetForm()"
>
重置
</el-button>
</el-col>
</el-form-item>
</el-form>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
HmComplexForm
from
'./HmComplexForm.vue'
export
default
{
export
default
{
name
:
'formComponent'
,
name
:
'HmComplexForm'
,
// 继承其他组件
extends
:
{},
// 使用其它组件
components
:
{
'hm-complex-form'
:
HmComplexForm
},
data
()
{
data
()
{
return
{
return
{}
form
:
{
name
:
''
,
gender
:
'男'
,
age
:
''
,
password
:
''
,
website
:
''
,
img
:
''
,
date
:
''
,
education
:
''
,
color
:
'#ff0000'
,
phone
:
''
,
email
:
''
,
address
:
''
},
rules
:
{
name
:
[
{
required
:
true
,
message
:
'请输入姓名'
,
trigger
:
'blur'
},
{
min
:
2
,
max
:
5
,
message
:
'长度在 2 到 5 个字符'
,
trigger
:
'blur'
}
],
age
:
[
{
required
:
true
,
message
:
'请输入年龄'
,
trigger
:
'blur'
},
{
type
:
'number'
,
message
:
'年龄必须为数字'
,
trigger
:
'change'
}
],
website
:
[
{
required
:
true
,
message
:
'请输入网址'
,
trigger
:
'blur'
},
{
pattern
:
/
[
a-zA-z
]
+:
\/\/[^\s]
*/
,
message
:
'请输入正确的网址'
,
trigger
:
'change'
}
],
password
:
[
{
required
:
true
,
message
:
'请输入密码'
,
trigger
:
'blur'
},
{
pattern
:
/^
(?![
0-9
]
+$
)(?![
a-zA-Z
]
+$
)[
0-9A-Za-z
]{6,20}
$/
,
message
:
'密码必须同时包含数字和字母 6-20位'
,
trigger
:
'change'
}
],
phone
:
[
{
type
:
'number'
,
required
:
true
,
message
:
'请输入手机号'
,
trigger
:
'blur'
},
{
pattern
:
/^1
[
34578
]\d{9}
$/
,
message
:
'请输入正确的手机号'
,
trigger
:
'change'
}
],
email
:
[
{
required
:
true
,
message
:
'请输入邮箱地址'
,
trigger
:
'blur'
},
{
type
:
'email'
,
message
:
'请输入正确的邮箱地址'
,
trigger
:
'blur,change'
}
]
}
}
},
},
methods
:
{
computed
:
{
onSubmit
()
{
},
this
.
$refs
.
form
.
validate
((
valid
)
=>
{
filters
:
{
if
(
valid
)
{
},
console
.
log
(
'提交成功!'
)
created
()
{
}
else
{
},
console
.
log
(
'提交失败!!'
)
methods
:
{}
return
false
}
})
},
resetForm
()
{
this
.
$refs
.
form
.
resetFields
()
}
}
}
}
</
script
>
</
script
>
<
style
scoped
>
<
style
scoped
>
.form-wrapper
{
width
:
50%
;
margin
:
0
auto
;
border
:
1px
solid
orange
;
}
.title
{
line-height
:
40px
;
background
:
orange
;
color
:
#fff
;
text-align
:
center
;
margin-top
:
0
;
}
</
style
>
</
style
>
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment