看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,32 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { AlignType, JustifyType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * u-col 布局单元格 Props
+ * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+ * @property {String|Number} span 栅格占据的列数，总12等分（默认12）
+ * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+ * @property {JustifyType} justify 水平排列方式，可选值为start、end、center、around、between（默认start）
+ * @property {AlignType} align 垂直对齐方式，可选值为top、center、bottom（默认center）
+ * @property {String} textAlign 文字对齐方式（默认left）
+ * @property {Boolean} stop 是否阻止事件传播（默认true）
+ */
+
+export const ColProps = {
+    ...baseProps,
+    /** 占父容器宽度的多少等分，总分为12份 */
+    span: { type: [Number, String] as PropType<number | string>, default: 12 },
+    /** 指定栅格左侧的间隔数(总12栏) */
+    offset: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 水平排列方式 */
+    justify: { type: String as PropType<JustifyType>, default: 'start' },
+    /** 垂直对齐方式 */
+    align: { type: String as PropType<AlignType>, default: 'center' },
+    /** 文字对齐方式 */
+    textAlign: { type: String, default: 'left' },
+    /** 是否阻止事件传播 */
+    stop: { type: Boolean, default: true }
+};
+
+export type ColProps = ExtractPropTypes<typeof ColProps>;
@@ -0,0 +1,142 @@
+<template>
+    <view
+        class="u-col"
+        :class="['u-col-' + span, customClass]"
+        :style="$u.toStyle(colStyle, customStyle)"
+        @tap="onClick"
+    >
+        <slot></slot>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-col',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ColProps } from './types';
+import { $u, useChildren } from '../../';
+
+/**
+ * col 布局单元格
+ * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+ * @tutorial https://uviewpro.cn/zh/components/layout.html
+ * @property {String|Number} span 栅格占据的列数，总12等分（默认0）
+ * @property {String} text-align 文字水平对齐方式（默认left）
+ * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+ * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
+ */
+
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+const props = defineProps(ColProps);
+
+const { parentExposed } = useChildren('u-col', 'u-row');
+
+/**
+ * gutter 给col添加间距，左右边距各占一半，从父组件u-row获取
+ */
+const gutter = computed(() => {
+    return parentExposed?.value?.props?.gutter ?? 20;
+});
+
+/**
+ * 计算水平排列方式
+ * @returns {string}
+ */
+const uJustify = computed(() => {
+    if (props.justify === 'end' || props.justify === 'start') return 'flex-' + props.justify;
+    else if (props.justify === 'around' || props.justify === 'between') return 'space-' + props.justify;
+    else return props.justify;
+});
+
+/**
+ * 计算垂直对齐方式
+ * @returns {string}
+ */
+const uAlignItem = computed(() => {
+    if (props.align === 'top') return 'flex-start';
+    if (props.align === 'bottom') return 'flex-end';
+    else return props.align;
+});
+
+/**
+ * 计算样式对象
+ */
+const colStyle = computed<any>(() => ({
+    padding: `0 ${Number(gutter.value) / 2}px`,
+    marginLeft: `${(100 / 12) * Number(props.offset)}%`,
+    flex: `0 0 ${(100 / 12) * Number(props.span)}%`,
+    alignItems: uAlignItem.value,
+    justifyContent: uJustify.value,
+    textAlign: props.textAlign
+}));
+
+/**
+ * 点击事件
+ * @param e 事件对象
+ */
+function onClick(e: Event) {
+    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>