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> <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>
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