123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- <template>
- <view
- class="u-row"
- ref="u-row"
- :style="[rowStyle]"
- @tap="clickHandler"
- >
- <slot />
- </view>
- </template>
- <script>
-
- const dom = uni.requireNativePlugin('dom')
-
- import props from './props.js';
-
- export default {
- name: "u-row",
- mixins: [uni.$u.mpMixin, uni.$u.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
- }
-
- if(this.gutter) {
- style.marginLeft = uni.$u.addUnit(-Number(this.gutter)/2)
- style.marginRight = uni.$u.addUnit(-Number(this.gutter)/2)
- }
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- }
- },
- methods: {
- clickHandler(e) {
- this.$emit('click')
- },
- async getComponentWidth() {
-
- await uni.$u.sleep()
- return new Promise(resolve => {
-
-
- this.$uGetRect('.u-row').then(res => {
- resolve(res.width)
- })
-
-
-
- dom.getComponentRect(this.$refs['u-row'], (res) => {
- resolve(res.size.width)
- })
-
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
-
- .u-row {
- @include flex;
- }
- </style>
|