Skip to content

U
uview-ui
Commit 2d338cd8 authored by beiqiao's avatar beiqiao
Browse files
Options

语法提示，文档说明，进一步更新。 （补充Layout布局）

parent 4a3a32b8
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 153 deletions
uview/components/u-col/u-col.vue
View file @ 2d338cd8
<template>
<view class="u-col" :class="[
'u-col-' + span
]" :style="{
padding: `0 ${Number(gutter)/2 + 'rpx'}`,
marginLeft: 100 / 12 * offset + '%',
flex: `0 0 ${100 / 12 * span}%`
}">
<slot></slot>
</view>
</template>
<script>
export default {
props: {
// 占父容器宽度的多少等分，总分为12份
span: {
type: [Number, String],
default: 12
},
// 指定栅格左侧的间隔数(总12栏)
offset: {
type: [Number, String],
default: 0
},
},
inject: ['gutter'],
}
</script>
<style lang="scss">
.u-col {
/* #ifdef MP-WEIXIN */
float: left;
/* #endif */
}
.u-col-0 {
width: 0;
}
.u-col-1 {
width: calc(100%/12);
}
.u-col-2 {
width: calc(100%/12 * 2);
}
.u-col-3 {
width: calc(100%/12 * 3);
}
.u-col-4 {
width: calc(100%/12 * 4);
}
.u-col-5 {
width: calc(100%/12 * 5);
}
.u-col-6 {
width: calc(100%/12 * 6);
}
.u-col-7 {
width: calc(100%/12 * 7);
}
.u-col-8 {
width: calc(100%/12 * 8);
}
.u-col-9 {
width: calc(100%/12 * 9);
}
.u-col-10 {
width: calc(100%/12 * 10);
}
.u-col-11 {
width: calc(100%/12 * 11);
}
.u-col-12 {
width: calc(100%/12 * 12);
}
<template>
<view class="u-col" :class="[
'u-col-' + span
]" :style="{
padding: `0 ${Number(gutter)/2 + 'rpx'}`,
marginLeft: 100 / 12 * offset + '%',
flex: `0 0 ${100 / 12 * span}%`
}">
<slot></slot>
</view>
</template>
<script>
/**
* alertTips 提示
* @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
* @tutorial https://www.uviewui.com/components/layout.html
* @property {String Number} span 栅格占据的列数，总12等分（默认0）
* @property {String Number} offset 分栏左边偏移，计算方式与span相同（默认0）
* @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
*/
export default {
name: "u-col",
props: {
// 占父容器宽度的多少等分，总分为12份
span: {
type: [Number, String],
default: 12
},
// 指定栅格左侧的间隔数(总12栏)
offset: {
type: [Number, String],
default: 0
},
},
inject: ['gutter'],
}
</script>
<style lang="scss">
.u-col {
/* #ifdef MP-WEIXIN */
float: left;
/* #endif */
}
.u-col-0 {
width: 0;
}
.u-col-1 {
width: calc(100%/12);
}
.u-col-2 {
width: calc(100%/12 * 2);
}
.u-col-3 {
width: calc(100%/12 * 3);
}
.u-col-4 {
width: calc(100%/12 * 4);
}
.u-col-5 {
width: calc(100%/12 * 5);
}
.u-col-6 {
width: calc(100%/12 * 6);
}
.u-col-7 {
width: calc(100%/12 * 7);
}
.u-col-8 {
width: calc(100%/12 * 8);
}
.u-col-9 {
width: calc(100%/12 * 9);
}
.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>
uview/components/u-row/u-row.vue
View file @ 2d338cd8
<template>
<view class="u-row" :style="{
marginLeft: `-${gutter/2 + 'rpx'}`,
marginRight: `-${gutter/2 + 'rpx'}`,
alignItems: uAlignItem,
justifyContent: uJustify
}">
<slot />
</view>
</template>
<script>
export default {
props: {
// 给col添加间距，左右边距各占一半
gutter: {
type: [String, Number],
default: 20
},
// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
justify: {
type: String,
default: 'start'
},
// 垂直对齐方式，可选值为top、center、bottom
align: {
type: String,
default: 'center'
}
},
provide() {
return {
gutter: this.gutter
}
},
computed: {
uJustify() {
if(this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
else if(this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
else return this.justify;
},
uAlignItem() {
if(this.align == 'top') return 'flex-start';
if(this.align == 'bottom') return 'flex-end';
else return this.align;
}
}
}
</script>
<style lang="scss">
.u-row {
// 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
/* #ifndef MP-WEIXIN */
display: flex;
/* #endif */
}
.u-row:after {
/* #ifdef MP-WEIXIN */
display: table;
clear: both;
content: "";
/* #endif */
}
<template>
<view class="u-row" :style="{
marginLeft: `-${gutter/2 + 'rpx'}`,
marginRight: `-${gutter/2 + 'rpx'}`,
alignItems: uAlignItem,
justifyContent: uJustify
}">
<slot />
</view>
</template>
<script>
/**
* alertTips 提示
* @description 通过基础的 12 分栏，迅速简便地创建布局。
* @tutorial https://www.uviewui.com/components/layout.html#row-props
* @property {String Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
* @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
* @property {String} align 垂直排列方式（默认center）
* @example <u-row gutter="16"></u-row>
*/
export default {
name: "u-row",
props: {
// 给col添加间距，左右边距各占一半
gutter: {
type: [String, Number],
default: 20
},
// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
justify: {
type: String,
default: 'start'
},
// 垂直对齐方式，可选值为top、center、bottom
align: {
type: String,
default: 'center'
}
},
provide() {
return {
gutter: this.gutter
}
},
computed: {
uJustify() {
if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
else return this.justify;
},
uAlignItem() {
if (this.align == 'top') return 'flex-start';
if (this.align == 'bottom') return 'flex-end';
else return this.align;
}
}
}
</script>
<style lang="scss">
.u-row {
// 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
/* #ifndef MP-WEIXIN */
display: flex;
/* #endif */
}
.u-row:after {
/* #ifdef MP-WEIXIN */
display: table;
clear: both;
content: "";
/* #endif */
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment