12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <template>
- <view class="u-row" :style="{
- marginLeft: `-${gutter/2 + 'rpx'}`,
- marginRight: `-${gutter/2 + 'rpx'}`,
- alignItems: uAlignItem,
- justifyContent: uJustify
- }">
- <slot />
- </view>
- </template>
- <script>
-
- export default {
- name: "u-row",
- props: {
-
- gutter: {
- type: [String, Number],
- default: 20
- },
-
- justify: {
- type: String,
- default: 'start'
- },
-
- 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>
|