Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
U
uview-ui
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
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
李晖
uview-ui
Commits
2d338cd8
Commit
2d338cd8
authored
Apr 23, 2020
by
beiqiao
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
语法提示,文档说明,进一步更新。 (补充Layout布局)
parent
4a3a32b8
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
172 additions
and
153 deletions
+172
-153
u-col.vue
uview/components/u-col/u-col.vue
+97
-88
u-row.vue
uview/components/u-row/u-row.vue
+75
-65
No files found.
uview/components/u-col/u-col.vue
View file @
2d338cd8
<
template
>
<
template
>
<view
class=
"u-col"
:class=
"[
<view
class=
"u-col"
:class=
"[
'u-col-' + span
'u-col-' + span
]"
:style=
"
{
]"
:style=
"
{
padding: `0 ${Number(gutter)/2 + 'rpx'}`,
padding: `0 ${Number(gutter)/2 + 'rpx'}`,
marginLeft: 100 / 12 * offset + '%',
marginLeft: 100 / 12 * offset + '%',
flex: `0 0 ${100 / 12 * span}%`
flex: `0 0 ${100 / 12 * span}%`
}">
}">
<slot></slot>
<slot></slot>
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
export
default
{
/**
props
:
{
* alertTips 提示
// 占父容器宽度的多少等分,总分为12份
* @description 通过基础的 12 分栏,迅速简便地创建布局(搭配<u-row>使用)
span
:
{
* @tutorial https://www.uviewui.com/components/layout.html
type
:
[
Number
,
String
],
* @property {String Number} span 栅格占据的列数,总12等分(默认0)
default
:
12
* @property {String Number} offset 分栏左边偏移,计算方式与span相同(默认0)
},
* @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
// 指定栅格左侧的间隔数(总12栏)
*/
offset
:
{
export
default
{
type
:
[
Number
,
String
],
name
:
"
u-col
"
,
default
:
0
props
:
{
},
// 占父容器宽度的多少等分,总分为12份
},
span
:
{
inject
:
[
'
gutter
'
],
type
:
[
Number
,
String
],
}
default
:
12
</
script
>
},
// 指定栅格左侧的间隔数(总12栏)
<
style
lang=
"scss"
>
offset
:
{
.u-col
{
type
:
[
Number
,
String
],
/* #ifdef MP-WEIXIN */
default
:
0
float
:
left
;
},
/* #endif */
},
}
inject
:
[
'
gutter
'
],
}
.u-col-0
{
</
script
>
width
:
0
;
}
<
style
lang=
"scss"
>
.u-col
{
.u-col-1
{
/* #ifdef MP-WEIXIN */
width
:
calc
(
100%
/
12
);
float
:
left
;
}
/* #endif */
}
.u-col-2
{
width
:
calc
(
100%
/
12
*
2
);
.u-col-0
{
}
width
:
0
;
}
.u-col-3
{
width
:
calc
(
100%
/
12
*
3
);
.u-col-1
{
}
width
:
calc
(
100%
/
12
);
}
.u-col-4
{
width
:
calc
(
100%
/
12
*
4
);
.u-col-2
{
}
width
:
calc
(
100%
/
12
*
2
);
}
.u-col-5
{
width
:
calc
(
100%
/
12
*
5
);
.u-col-3
{
}
width
:
calc
(
100%
/
12
*
3
);
}
.u-col-6
{
width
:
calc
(
100%
/
12
*
6
);
.u-col-4
{
}
width
:
calc
(
100%
/
12
*
4
);
}
.u-col-7
{
width
:
calc
(
100%
/
12
*
7
);
.u-col-5
{
}
width
:
calc
(
100%
/
12
*
5
);
}
.u-col-8
{
width
:
calc
(
100%
/
12
*
8
);
.u-col-6
{
}
width
:
calc
(
100%
/
12
*
6
);
}
.u-col-9
{
width
:
calc
(
100%
/
12
*
9
);
.u-col-7
{
}
width
:
calc
(
100%
/
12
*
7
);
}
.u-col-10
{
width
:
calc
(
100%
/
12
*
10
);
.u-col-8
{
}
width
:
calc
(
100%
/
12
*
8
);
}
.u-col-11
{
width
:
calc
(
100%
/
12
*
11
);
.u-col-9
{
}
width
:
calc
(
100%
/
12
*
9
);
}
.u-col-12
{
width
:
calc
(
100%
/
12
*
12
);
.u-col-10
{
}
width
:
calc
(
100%
/
12
*
10
);
}
.u-col-11
{
width
:
calc
(
100%
/
12
*
11
);
}
.u-col-12
{
width
:
calc
(
100%
/
12
*
12
);
}
</
style
>
</
style
>
uview/components/u-row/u-row.vue
View file @
2d338cd8
<
template
>
<
template
>
<view
class=
"u-row"
:style=
"
{
<view
class=
"u-row"
:style=
"
{
marginLeft: `-${gutter/2 + 'rpx'}`,
marginLeft: `-${gutter/2 + 'rpx'}`,
marginRight: `-${gutter/2 + 'rpx'}`,
marginRight: `-${gutter/2 + 'rpx'}`,
alignItems: uAlignItem,
alignItems: uAlignItem,
justifyContent: uJustify
justifyContent: uJustify
}">
}">
<slot
/>
<slot
/>
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
export
default
{
/**
props
:
{
* alertTips 提示
// 给col添加间距,左右边距各占一半
* @description 通过基础的 12 分栏,迅速简便地创建布局。
gutter
:
{
* @tutorial https://www.uviewui.com/components/layout.html#row-props
type
:
[
String
,
Number
],
* @property {String Number} gutter 栅格间隔,左右各为此值的一半,单位rpx(默认0)
default
:
20
* @property {String} justify 水平排列方式(微信小程序暂不支持)默认(start(或flex-start))
},
* @property {String} align 垂直排列方式(默认center)
// 水平排列方式,可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
* @example <u-row gutter="16"></u-row>
justify
:
{
*/
type
:
String
,
export
default
{
default
:
'
start
'
name
:
"
u-row
"
,
},
props
:
{
// 垂直对齐方式,可选值为top、center、bottom
// 给col添加间距,左右边距各占一半
align
:
{
gutter
:
{
type
:
String
,
type
:
[
String
,
Number
],
default
:
'
center
'
default
:
20
}
},
},
// 水平排列方式,可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
provide
()
{
justify
:
{
return
{
type
:
String
,
gutter
:
this
.
gutter
default
:
'
start
'
}
},
},
// 垂直对齐方式,可选值为top、center、bottom
computed
:
{
align
:
{
uJustify
()
{
type
:
String
,
if
(
this
.
justify
==
'
end
'
||
this
.
justify
==
'
start
'
)
return
'
flex-
'
+
this
.
justify
;
default
:
'
center
'
else
if
(
this
.
justify
==
'
around
'
||
this
.
justify
==
'
between
'
)
return
'
space-
'
+
this
.
justify
;
}
else
return
this
.
justify
;
},
},
provide
()
{
uAlignItem
()
{
return
{
if
(
this
.
align
==
'
top
'
)
return
'
flex-start
'
;
gutter
:
this
.
gutter
if
(
this
.
align
==
'
bottom
'
)
return
'
flex-end
'
;
}
else
return
this
.
align
;
},
}
computed
:
{
}
uJustify
()
{
}
if
(
this
.
justify
==
'
end
'
||
this
.
justify
==
'
start
'
)
return
'
flex-
'
+
this
.
justify
;
</
script
>
else
if
(
this
.
justify
==
'
around
'
||
this
.
justify
==
'
between
'
)
return
'
space-
'
+
this
.
justify
;
else
return
this
.
justify
;
<
style
lang=
"scss"
>
},
.u-row
{
uAlignItem
()
{
// 由于微信小程序编译后奇怪的页面结构,只能使用float布局实现,flex无法实现
if
(
this
.
align
==
'
top
'
)
return
'
flex-start
'
;
/* #ifndef MP-WEIXIN */
if
(
this
.
align
==
'
bottom
'
)
return
'
flex-end
'
;
display
:
flex
;
else
return
this
.
align
;
/* #endif */
}
}
}
}
.u-row
:after
{
</
script
>
/* #ifdef MP-WEIXIN */
display
:
table
;
<
style
lang=
"scss"
>
clear
:
both
;
.u-row
{
content
:
""
;
// 由于微信小程序编译后奇怪的页面结构,只能使用float布局实现,flex无法实现
/* #endif */
/* #ifndef MP-WEIXIN */
}
display
:
flex
;
/* #endif */
}
.u-row
:after
{
/* #ifdef MP-WEIXIN */
display
:
table
;
clear
:
both
;
content
:
""
;
/* #endif */
}
</
style
>
</
style
>
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