dykj-outsource-12123/uni_modules/uview-plus/components/u-row/u-row.vue
2024-06-28 14:18:30 +08:00

98 lines
2.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
class="u-row"
ref="u-row"
:style="[rowStyle]"
@tap="clickHandler"
>
<slot />
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addUnit, addStyle, deepMerge, sleep } from '../../libs/function/index';
/**
* Row 栅格系统中的行
* @description 通过基础的 12 分栏,迅速简便地创建布局
* @tutorial https://ijry.github.io/uview-plus/components/layout.html
* @property {String | Number} gutter 栅格间隔左右各为此值的一半单位px (默认 0 )
* @property {String} justify 水平排列方式(微信小程序暂不支持) 可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) (默认 'start' )
* @property {String} align 垂直排列方式 (默认 'center' )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click row被点击
* @example <u-row justify="space-between" customStyle="margin-bottom: 10px"></u-row>
*/
export default {
name: "u-row",
mixins: [mpMixin, mixin, props],
data() {
return {
}
},
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
},
rowStyle() {
const style = {
alignItems: this.uAlignItem,
justifyContent: this.uJustify
}
// 通过给u-row左右两边的负外边距消除u-col在有gutter时第一个和最后一个元素的左内边距和右内边距造成的影响
if(this.gutter) {
style.marginLeft = addUnit(-Number(this.gutter)/2)
style.marginRight = addUnit(-Number(this.gutter)/2)
}
return deepMerge(style, addStyle(this.customStyle))
}
},
emits: ["click"],
methods: {
clickHandler(e) {
this.$emit('click')
},
async getComponentWidth() {
// 延时一定时间,以确保节点渲染完成
await sleep()
return new Promise(resolve => {
// uView封装的获取节点的方法详见文档
// #ifndef APP-NVUE
this.$uGetRect('.u-row').then(res => {
resolve(res.width)
})
// #endif
// #ifdef APP-NVUE
// nvue的dom模块用于获取节点
dom.getComponentRect(this.$refs['u-row'], (res) => {
resolve(res.size.width)
})
// #endif
})
},
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-row {
@include flex;
}
</style>