uview-pro 0.2.1 → 0.2.3

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

@@ -1,150 +1,150 @@
-<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]"
+            :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>

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

@@ -0,0 +1,54 @@
+<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 -->

package/components/u-row/types.ts

@@ -1,20 +1,20 @@
-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';
+
+/**
+ * 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>;

package/components/u-row/u-row.vue

@@ -1,87 +1,87 @@
-<template>
-    <view
-        class="u-row"
-        :style="{
-            alignItems: uAlignItem,
-            justifyContent: uJustify
-        }"
-        @tap="onClick"
-    >
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed, provide } from 'vue';
-import { RowProps } from './types';
-
-defineOptions({
-    name: 'u-row'
-});
-
-/**
- * row 行布局
- * @description 通过基础的 12 分栏，迅速简便地创建布局。
- * @tutorial https://uviewpro.cn/zh/components/layout.html#row-props
- * @property {String|Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
- * @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
- * @property {String} align 垂直排列方式（默认center）
- * @example <u-row gutter="16"></u-row>
- */
-
-const emit = defineEmits<{ (e: 'click'): void }>();
-
-const props = defineProps(RowProps);
-
-// 提供 gutter 给子组件 u-col 使用
-provide('u-row-gutter', props.gutter);
-
-/**
- * 计算水平排列方式
- * @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;
-});
-
-/**
- * 点击事件
- * @param e 事件对象
- */
-function onClick(e: Event) {
-    // 触发 click 事件
-    emit('click');
-}
-</script>
-
-<style lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-row {
-    // 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
-    /* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
-    @include vue-flex;
-    /* #endif */
-    flex-wrap: wrap;
-}
-
-.u-row:after {
-    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
-    display: table;
-    clear: both;
-    content: '';
-    /* #endif */
-}
-</style>
+<template>
+    <view
+        class="u-row"
+        :style="{
+            alignItems: uAlignItem,
+            justifyContent: uJustify
+        }"
+        @tap="onClick"
+    >
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue';
+import { RowProps } from './types';
+
+defineOptions({
+    name: 'u-row'
+});
+
+/**
+ * row 行布局
+ * @description 通过基础的 12 分栏，迅速简便地创建布局。
+ * @tutorial https://uviewpro.cn/zh/components/layout.html#row-props
+ * @property {String|Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
+ * @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
+ * @property {String} align 垂直排列方式（默认center）
+ * @example <u-row gutter="16"></u-row>
+ */
+
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+const props = defineProps(RowProps);
+
+// 提供 gutter 给子组件 u-col 使用
+provide('u-row-gutter', props.gutter);
+
+/**
+ * 计算水平排列方式
+ * @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;
+});
+
+/**
+ * 点击事件
+ * @param e 事件对象
+ */
+function onClick(e: Event) {
+    // 触发 click 事件
+    emit('click');
+}
+</script>
+
+<style lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-row {
+    // 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
+    /* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    @include vue-flex;
+    /* #endif */
+    flex-wrap: wrap;
+}
+
+.u-row:after {
+    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    display: table;
+    clear: both;
+    content: '';
+    /* #endif */
+}
+</style>

package/components/u-row-notice/types.ts

@@ -1,39 +1,39 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { PlayState, ThemeType } from '../../types/global';
-
-/**
- * RowNoticeProps 水平滚动通告栏 props 类型定义
- * @description 水平滚动通告栏，支持主题、图标、关闭等
- */
-export const RowNoticeProps = {
-    /** 显示的内容，数组 */
-    list: { type: Array as PropType<string[]>, default: () => [] },
-    /** 显示的主题，success|error|primary|info|warning|none */
-    type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
-    /** 是否显示左侧的音量图标 */
-    volumeIcon: { type: Boolean, default: true },
-    /** 是否显示右侧的右箭头图标 */
-    moreIcon: { type: Boolean, default: false },
-    /** 是否显示右侧的关闭图标 */
-    closeIcon: { type: Boolean, default: false },
-    /** 是否自动播放 */
-    autoplay: { type: Boolean, default: true },
-    /** 文字颜色，各图标也会使用文字颜色 */
-    color: { type: String, default: '' },
-    /** 背景颜色 */
-    bgColor: { type: String, default: '' },
-    /** 是否显示 */
-    show: { type: Boolean, default: true },
-    /** 字体大小，单位rpx */
-    fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
-    /** 音量喇叭的大小 */
-    volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
-    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
-    speed: { type: [Number, String] as PropType<number | string>, default: 160 },
-    /** 播放状态，play-播放，paused-暂停 */
-    playState: { type: String as PropType<PlayState>, default: 'play' },
-    /** 通知的边距 */
-    padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
-};
-
-export type RowNoticeProps = ExtractPropTypes<typeof RowNoticeProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { PlayState, ThemeType } from '../../types/global';
+
+/**
+ * RowNoticeProps 水平滚动通告栏 props 类型定义
+ * @description 水平滚动通告栏，支持主题、图标、关闭等
+ */
+export const RowNoticeProps = {
+    /** 显示的内容，数组 */
+    list: { type: Array as PropType<string[]>, default: () => [] },
+    /** 显示的主题，success|error|primary|info|warning|none */
+    type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
+    /** 是否显示左侧的音量图标 */
+    volumeIcon: { type: Boolean, default: true },
+    /** 是否显示右侧的右箭头图标 */
+    moreIcon: { type: Boolean, default: false },
+    /** 是否显示右侧的关闭图标 */
+    closeIcon: { type: Boolean, default: false },
+    /** 是否自动播放 */
+    autoplay: { type: Boolean, default: true },
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 是否显示 */
+    show: { type: Boolean, default: true },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
+    /** 音量喇叭的大小 */
+    volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
+    speed: { type: [Number, String] as PropType<number | string>, default: 160 },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: { type: String as PropType<PlayState>, default: 'play' },
+    /** 通知的边距 */
+    padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
+};
+
+export type RowNoticeProps = ExtractPropTypes<typeof RowNoticeProps>;