|
|
@@ -0,0 +1,66 @@
|
|
|
+<template>
|
|
|
+ <view class="ut-col" :style="colStyle">
|
|
|
+ <slot />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, inject, unref } from 'vue';
|
|
|
+
|
|
|
+interface UtColProps {
|
|
|
+ /** 占用份数(列宽),最大不超过 30 */
|
|
|
+ span?: number;
|
|
|
+}
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<UtColProps>(), {
|
|
|
+ span: 10,
|
|
|
+});
|
|
|
+
|
|
|
+const ROW_INJECT_KEY = 'ut-row-context';
|
|
|
+
|
|
|
+const rowContext = inject<any>(ROW_INJECT_KEY, null);
|
|
|
+
|
|
|
+const colStyle = computed(() => {
|
|
|
+ const styles: Record<string, string> = {};
|
|
|
+ if (!rowContext) return styles;
|
|
|
+ console.log(rowContext.gap);
|
|
|
+
|
|
|
+ const columns = Number(unref(rowContext.columns) || 0);
|
|
|
+ const gap = Number(unref(rowContext.gap) || 0);
|
|
|
+ const span = props.span || 0;
|
|
|
+
|
|
|
+ if (columns > 0 && span > 0) {
|
|
|
+ const percent = (span / columns) * 100;
|
|
|
+ styles.flex = `0 0 ${percent}%`;
|
|
|
+ styles.maxWidth = `${percent}%`;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gap > 0) {
|
|
|
+ const half = `${gap / 2}px`;
|
|
|
+ styles.paddingLeft = half;
|
|
|
+ styles.paddingRight = half;
|
|
|
+ styles.paddingTop = half;
|
|
|
+ styles.paddingBottom = half;
|
|
|
+ }
|
|
|
+
|
|
|
+ return styles;
|
|
|
+});
|
|
|
+</script>
|
|
|
+<script lang="ts">
|
|
|
+export default {
|
|
|
+ options: {
|
|
|
+ // 微信小程序中 options 选项
|
|
|
+ multipleSlots: true, // 在组件定义时的选项中启动多slot支持,默认启用
|
|
|
+ styleIsolation: 'shared', // 启动样式隔离。当使用页面自定义组件,希望父组件影响子组件样式时可能需要配置。具体配置选项参见:微信小程序自定义组件的样式
|
|
|
+ addGlobalClass: true, // 表示页面样式将影响到自定义组件,但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
|
|
|
+ virtualHost: true // 将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.ut-col {
|
|
|
+ min-width: 0; // 防止内容撑破
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|