From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 06 Nov 2023 08:48:39 +0800 Subject: [PATCH] fix:小程序订阅消息 --- uni_modules/uview-ui/components/u-col/u-col.vue | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 162 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-col/u-col.vue b/uni_modules/uview-ui/components/u-col/u-col.vue new file mode 100644 index 0000000..8be1517 --- /dev/null +++ b/uni_modules/uview-ui/components/u-col/u-col.vue @@ -0,0 +1,162 @@ +<template> + <view + class="u-col" + ref="u-col" + :class="[ + 'u-col-' + span + ]" + :style="[colStyle]" + @tap="clickHandler" + > + <slot></slot> + </view> +</template> + +<script> + import props from './props.js'; + /** + * CodeInput ������������������ + * @description ���������������������Layout ������ ��������������� 12 ������������������������������������ + * @tutorial https://www.uviewui.com/components/Layout.html + * @property {String | Number} span ���������������������������12������ (������ 12 ) + * @property {String | Number} offset ������������������������������������span������ (������ 0 ) + * @property {String} justify ���������������������������������`start`(���`flex-start`)���`end`(���`flex-end`)���`center`���`around`(���`space-around`)���`between`(���`space-between`) (������ 'start' ) + * @property {String} align ���������������������������������top���center���bottom���stretch (������ 'stretch' ) + * @property {String} textAlign ������������������������ (������ 'left' ) + * @property {Object} customStyle ��������������������������������� + * @event {Function} click col������������������������������������row + * @example <u-col span="3" offset="3" > <view class="demo-layout bg-purple"></view> </u-col> + */ + export default { + name: 'u-col', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + width: 0, + parentData: { + gutter: 0 + }, + gridNum: 12 + } + }, + 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 + }, + colStyle() { + const style = { + // ������������"padding: 0 10px"������������������nvue��������� + paddingLeft: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2), + paddingRight: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2), + alignItems: this.uAlignItem, + justifyContent: this.uJustify, + textAlign: this.textAlign, + // #ifndef APP-NVUE + // ������nvue��������������������������� + flex: `0 0 ${100 / this.gridNum * this.span}%`, + marginLeft: 100 / 12 * this.offset + '%', + // #endif + // #ifdef APP-NVUE + // ���nvue������������������������������������������������������������������������������������������������������������������������������ + width: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.span))), + marginLeft: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.offset))), + // #endif + } + return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) + } + }, + mounted() { + this.init() + }, + methods: { + async init() { + // ���������������������������provide/inject������������������������������������������������������created��������������������������� + this.updateParentData() + this.width = await this.parent.getComponentWidth() + }, + updateParentData() { + this.getParentData('u-row') + }, + clickHandler(e) { + this.$emit('click'); + } + }, + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-col { + padding: 0; + /* #ifndef APP-NVUE */ + box-sizing:border-box; + /* #endif */ + /* #ifdef MP */ + display: block; + /* #endif */ + } + + // nvue������������������ + /* #ifndef APP-NVUE */ + .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); + } + + /* #endif */ +</style> -- Gitblit v1.8.0