From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-col/u-col.vue | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 156 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-col/u-col.vue b/uview-ui/components/u-col/u-col.vue
new file mode 100644
index 0000000..3b6cc64
--- /dev/null
+++ b/uview-ui/components/u-col/u-col.vue
@@ -0,0 +1,156 @@
+<template>
+ <view class="u-col" :class="[
+ 'u-col-' + span
+ ]" :style="{
+ padding: `0 ${Number(gutter)/2 + 'rpx'}`,
+ marginLeft: 100 / 12 * offset + '%',
+ flex: `0 0 ${100 / 12 * span}%`,
+ alignItems: uAlignItem,
+ justifyContent: uJustify,
+ textAlign: textAlign
+ }"
+ @tap="click">
+ <slot></slot>
+ </view>
+</template>
+
+<script>
+ /**
+ * col 甯冨眬鍗曞厓鏍�
+ * @description 閫氳繃鍩虹鐨� 12 鍒嗘爮锛岃繀閫熺畝渚垮湴鍒涘缓甯冨眬锛堟惌閰�<u-row>浣跨敤锛�
+ * @tutorial https://www.uviewui.com/components/layout.html
+ * @property {String Number} span 鏍呮牸鍗犳嵁鐨勫垪鏁帮紝鎬�12绛夊垎锛堥粯璁�0锛�
+ * @property {String} text-align 鏂囧瓧姘村钩瀵归綈鏂瑰紡锛堥粯璁eft锛�
+ * @property {String Number} offset 鍒嗘爮宸﹁竟鍋忕Щ锛岃绠楁柟寮忎笌span鐩稿悓锛堥粯璁�0锛�
+ * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
+ */
+ export default {
+ name: "u-col",
+ props: {
+ // 鍗犵埗瀹瑰櫒瀹藉害鐨勫灏戠瓑鍒嗭紝鎬诲垎涓�12浠�
+ span: {
+ type: [Number, String],
+ default: 12
+ },
+ // 鎸囧畾鏍呮牸宸︿晶鐨勯棿闅旀暟(鎬�12鏍�)
+ offset: {
+ type: [Number, String],
+ default: 0
+ },
+ // 姘村钩鎺掑垪鏂瑰紡锛屽彲閫夊�间负`start`(鎴朻flex-start`)銆乣end`(鎴朻flex-end`)銆乣center`銆乣around`(鎴朻space-around`)銆乣between`(鎴朻space-between`)
+ justify: {
+ type: String,
+ default: 'start'
+ },
+ // 鍨傜洿瀵归綈鏂瑰紡锛屽彲閫夊�间负top銆乧enter銆乥ottom
+ align: {
+ type: String,
+ default: 'center'
+ },
+ // 鏂囧瓧瀵归綈鏂瑰紡
+ textAlign: {
+ type: String,
+ default: 'left'
+ },
+ // 鏄惁闃绘浜嬩欢浼犳挱
+ stop: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data() {
+ return {
+ gutter: 20, // 缁檆ol娣诲姞闂磋窛锛屽乏鍙宠竟璺濆悇鍗犱竴鍗婏紝浠庣埗缁勪欢u-row鑾峰彇
+ }
+ },
+ created() {
+ this.parent = false;
+ },
+ mounted() {
+ // 鑾峰彇鐖剁粍浠跺疄渚嬶紝骞惰祴鍊肩粰瀵瑰簲鐨勫弬鏁�
+ this.parent = this.$u.$parent.call(this, 'u-row');
+ if (this.parent) {
+ this.gutter = this.parent.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;
+ }
+ },
+ methods: {
+ click(e) {
+ this.$emit('click');
+ }
+ }
+ }
+</script>
+
+<style lang="scss">
+ @import "../../libs/css/style.components.scss";
+
+ .u-col {
+ /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+ float: left;
+ /* #endif */
+ }
+
+ .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);
+ }
+</style>
--
Gitblit v1.9.3