uview-pro 0.2.4 → 0.3.1

package/components/u-read-more/u-read-more.vue

@@ -1,156 +1,172 @@
-<template>
-    <view>
-        <view
-            class="u-content"
-            :class="[elId]"
-            :style="{
-                height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
-                textIndent: textIndent
-            }"
-        >
-            <slot></slot>
-        </view>
-        <view
-            @tap="toggleReadMore"
-            v-if="isLongContent"
-            class="u-content__showmore-wrap"
-            :class="{ 'u-content__show-more': showMore }"
-            :style="[innerShadowStyle]"
-        >
-            <text
-                class="u-content__showmore-wrap__readmore-btn"
-                :style="{
-                    fontSize: fontSize + 'rpx',
-                    color: color
-                }"
-            >
-                {{ showMore ? openText : closeText }}
-            </text>
-            <view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
-                <u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
-import { $u } from '../..';
-import { ReadMoreProps } from './types';
-
-defineOptions({ name: 'u-read-more' });
-
-/**
- * readMore 阅读更多
- * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
- * @tutorial https://uviewpro.cn/zh/components/readMore.html
- * @property {String|Number} showHeight 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
- * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
- * @property {String} closeText 关闭时的提示文字（默认“展开阅读全文”）
- * @property {String|Number} fontSize 提示文字的大小，单位rpx（默认28）
- * @property {String} textIndent 段落首行缩进的字符个数（默认2em）
- * @property {String} openText 展开时的提示文字（默认“收起”）
- * @property {String} color 提示文字的颜色（默认#2979ff）
- * @property {Object} shadowStyle 是否显示阴影，样式对象
- * @property {String|Number} index open和close事件时，将此参数返回在回调参数中
- * @event open 展开时触发
- * @event close 收起时触发
- * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
- */
-
-const props = defineProps(ReadMoreProps);
-
-const emit = defineEmits(['open', 'close']);
-
-// 是否需要隐藏一部分内容
-const isLongContent = ref(false);
-// 当前隐藏与显示的状态，true-显示，false-收起
-const showMore = ref(false);
-// 生成唯一class
-const elId = ref('');
-const instance = getCurrentInstance();
-
-// 展开后无需阴影，收起时才需要阴影样式
-const innerShadowStyle = computed(() => {
-    return showMore.value ? {} : props.shadowStyle;
-});
-
-// 监听 toggle 和 showHeight 变化，重新初始化
-watch(
-    () => `${props.toggle}-${props.showHeight}`,
-    () => {
-        init();
-    }
-);
-
-onMounted(() => {
-    elId.value = $u.guid();
-    nextTick(() => {
-        init();
-    });
-});
-
-/**
- * 初始化内容高度判断
- * @description 判断内容是否超出指定高度，决定是否显示展开/收起按钮
- */
-function init() {
-    $u.getRect('.' + elId.value, instance).then((res: { height: number }) => {
-        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
-        if (res.height > uni.upx2px(Number(props.showHeight))) {
-            isLongContent.value = true;
-            showMore.value = false;
-        }
-    });
-}
-
-/**
- * 展开或者收起内容
- * @description 切换显示状态，发出 open/close 事件
- */
-function toggleReadMore() {
-    showMore.value = !showMore.value;
-    // 如果toggle为false，隐藏"收起"部分的内容
-    if (props.toggle == false) isLongContent.value = false;
-    // 发出打开或者收齐的事件
-    emit(showMore.value ? 'open' : 'close', props.index);
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-content {
-    font-size: 30rpx;
-    color: $u-content-color;
-    line-height: 1.8;
-    text-align: left;
-    overflow: hidden;
-
-    &__show-more {
-        padding-top: 0;
-        background: none;
-        margin-top: 20rpx;
-    }
-
-    &__showmore-wrap {
-        position: relative;
-        width: 100%;
-        padding-bottom: 26rpx;
-        @include vue-flex;
-        align-items: center;
-        justify-content: center;
-
-        &__readmore-btn {
-            @include vue-flex;
-            align-items: center;
-            justify-content: center;
-            line-height: 1;
-
-            &__icon {
-                margin-left: 14rpx;
-            }
-        }
-    }
-}
-</style>
+<template>
+    <view>
+        <view
+            class="u-content"
+            :class="[elId, customClass]"
+            :style="
+                $u.toStyle(
+                    {
+                        height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
+                        textIndent: textIndent
+                    },
+                    customStyle
+                )
+            "
+        >
+            <slot></slot>
+        </view>
+        <view
+            @tap="toggleReadMore"
+            v-if="isLongContent"
+            class="u-content__showmore-wrap"
+            :class="{ 'u-content__show-more': showMore }"
+            :style="[innerShadowStyle]"
+        >
+            <text
+                class="u-content__showmore-wrap__readmore-btn"
+                :style="{
+                    fontSize: fontSize + 'rpx',
+                    color: color
+                }"
+            >
+                {{ showMore ? openText : closeText }}
+            </text>
+            <view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
+                <u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-read-more',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+import { ReadMoreProps } from './types';
+
+/**
+ * readMore 阅读更多
+ * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+ * @tutorial https://uviewpro.cn/zh/components/readMore.html
+ * @property {String|Number} showHeight 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
+ * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
+ * @property {String} closeText 关闭时的提示文字（默认“展开阅读全文”）
+ * @property {String|Number} fontSize 提示文字的大小，单位rpx（默认28）
+ * @property {String} textIndent 段落首行缩进的字符个数（默认2em）
+ * @property {String} openText 展开时的提示文字（默认“收起”）
+ * @property {String} color 提示文字的颜色（默认#2979ff）
+ * @property {Object} shadowStyle 是否显示阴影，样式对象
+ * @property {String|Number} index open和close事件时，将此参数返回在回调参数中
+ * @event open 展开时触发
+ * @event close 收起时触发
+ * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
+ */
+
+const props = defineProps(ReadMoreProps);
+
+const emit = defineEmits(['open', 'close']);
+
+// 是否需要隐藏一部分内容
+const isLongContent = ref(false);
+// 当前隐藏与显示的状态，true-显示，false-收起
+const showMore = ref(false);
+// 生成唯一class
+const elId = ref('');
+const instance = getCurrentInstance();
+
+// 展开后无需阴影，收起时才需要阴影样式
+const innerShadowStyle = computed(() => {
+    return showMore.value ? {} : props.shadowStyle;
+});
+
+// 监听 toggle 和 showHeight 变化，重新初始化
+watch(
+    () => `${props.toggle}-${props.showHeight}`,
+    () => {
+        init();
+    }
+);
+
+onMounted(() => {
+    elId.value = $u.guid();
+    nextTick(() => {
+        init();
+    });
+});
+
+/**
+ * 初始化内容高度判断
+ * @description 判断内容是否超出指定高度，决定是否显示展开/收起按钮
+ */
+function init() {
+    $u.getRect('.' + elId.value, instance).then((res: { height: number }) => {
+        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+        if (res.height > uni.upx2px(Number(props.showHeight))) {
+            isLongContent.value = true;
+            showMore.value = false;
+        }
+    });
+}
+
+/**
+ * 展开或者收起内容
+ * @description 切换显示状态，发出 open/close 事件
+ */
+function toggleReadMore() {
+    showMore.value = !showMore.value;
+    // 如果toggle为false，隐藏"收起"部分的内容
+    if (props.toggle == false) isLongContent.value = false;
+    // 发出打开或者收齐的事件
+    emit(showMore.value ? 'open' : 'close', props.index);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-content {
+    font-size: 30rpx;
+    color: $u-content-color;
+    line-height: 1.8;
+    text-align: left;
+    overflow: hidden;
+
+    &__show-more {
+        padding-top: 0;
+        background: none;
+        margin-top: 20rpx;
+    }
+
+    &__showmore-wrap {
+        position: relative;
+        width: 100%;
+        padding-bottom: 26rpx;
+        @include vue-flex;
+        align-items: center;
+        justify-content: center;
+
+        &__readmore-btn {
+            @include vue-flex;
+            align-items: center;
+            justify-content: center;
+            line-height: 1;
+
+            &__icon {
+                margin-left: 14rpx;
+            }
+        }
+    }
+}
+</style>

package/components/u-root-portal/u-root-portal.vue

@@ -1,54 +1,56 @@
-<template>
-    <!-- #ifdef H5 -->
-    <teleport to="body">
-        <!-- #endif -->
-        <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
-        <!-- #ifndef MP-DINGTALK -->
-        <root-portal>
-            <!-- #endif -->
-            <!-- #endif -->
-            <slot />
-            <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
-            <!-- #ifndef MP-DINGTALK -->
-        </root-portal>
-        <!-- #endif -->
-        <!-- #endif -->
-        <!-- #ifdef H5 -->
-    </teleport>
-    <!-- #endif -->
-</template>
-<script>
-export default {
-    name: 'u-root-portal',
-    options: {
-        virtualHost: true,
-        addGlobalClass: true,
-        styleIsolation: 'shared'
-    }
-};
-</script>
-<script lang="ts" setup>
-/**
- * rootPortal 根节点传送
- * @description 该组件一般用于使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
- * @tutorial https://uviewpro.cn/zh/components/rootPortal.html
- * @example <u-root-portal><view class="modal">这是一个全局弹窗</view></u-root-portal>
- */
-</script>
-
-<!-- #ifdef APP-PLUS -->
-<script module="render" lang="renderjs">
-export default {
-  mounted() {
-    if (this.$ownerInstance.$el) {
-      (document.querySelector('uni-app') || document.body).appendChild(this.$ownerInstance.$el)
-    }
-  },
-  beforeDestroy() {
-    if (this.$ownerInstance.$el) {
-      (document.querySelector('uni-app') || document.body).removeChild(this.$ownerInstance.$el)
-    }
-  }
-}
-</script>
-<!-- #endif -->
+<template>
+    <!-- #ifdef H5 -->
+    <teleport to="body">
+        <!-- #endif -->
+        <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+        <!-- #ifndef MP-DINGTALK -->
+        <root-portal>
+            <!-- #endif -->
+            <!-- #endif -->
+            <slot />
+            <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+            <!-- #ifndef MP-DINGTALK -->
+        </root-portal>
+        <!-- #endif -->
+        <!-- #endif -->
+        <!-- #ifdef H5 -->
+    </teleport>
+    <!-- #endif -->
+</template>
+<script>
+export default {
+    name: 'u-root-portal',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+<script lang="ts" setup>
+/**
+ * rootPortal 根节点传送
+ * @description 该组件一般用于使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
+ * @tutorial https://uviewpro.cn/zh/components/rootPortal.html
+ * @example <u-root-portal><view class="modal">这是一个全局弹窗</view></u-root-portal>
+ */
+</script>
+
+<!-- #ifdef APP-PLUS -->
+<script module="render" lang="renderjs">
+export default {
+  mounted() {
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).appendChild(this.$ownerInstance.$el)
+    }
+  },
+  beforeDestroy() {
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).removeChild(this.$ownerInstance.$el)
+    }
+  }
+}
+</script>
+<!-- #endif -->

package/components/u-row/types.ts

@@ -1,20 +1,22 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { RowAlign, RowJustify } from '../../types/global';
-
-/**
- * RowProps 行布局 props 类型定义
- * @description 12分栏布局，快速创建布局
- */
-
-export const RowProps = {
-    /** 给col添加间距，左右边距各占一半 */
-    gutter: { type: [String, Number] as PropType<number | string>, default: 20 },
-    /** 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) */
-    justify: { type: String as PropType<RowJustify>, default: 'start' },
-    /** 垂直对齐方式，可选值为top、center、bottom */
-    align: { type: String as PropType<RowAlign>, default: 'center' },
-    /** 是否阻止事件传播 */
-    stop: { type: Boolean, default: true }
-};
-
-export type RowProps = ExtractPropTypes<typeof RowProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { RowAlign, RowJustify } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * RowProps 行布局 props 类型定义
+ * @description 12分栏布局，快速创建布局
+ */
+
+export const RowProps = {
+    ...baseProps,
+    /** 给col添加间距，左右边距各占一半 */
+    gutter: { type: [String, Number] as PropType<number | string>, default: 20 },
+    /** 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) */
+    justify: { type: String as PropType<RowJustify>, default: 'start' },
+    /** 垂直对齐方式，可选值为top、center、bottom */
+    align: { type: String as PropType<RowAlign>, default: 'center' },
+    /** 是否阻止事件传播 */
+    stop: { type: Boolean, default: true }
+};
+
+export type RowProps = ExtractPropTypes<typeof RowProps>;