uview-pro 0.2.4 → 0.3.1

package/components/u-loadmore/u-loadmore.vue

@@ -1,145 +1,156 @@
-<template>
-    <view
-        class="u-load-more-wrap"
-        :style="{
-            backgroundColor: props.bgColor,
-            marginBottom: props.marginBottom + 'rpx',
-            marginTop: props.marginTop + 'rpx',
-            height: $u.addUnit(props.height)
-        }"
-    >
-        <u-line color="#d4d4d4" length="50"></u-line>
-        <!-- 加载中和没有更多的状态才显示两边的横线 -->
-        <view :class="props.status == 'loadmore' || props.status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
-            <view class="u-loadmore-icon-wrap">
-                <u-loading
-                    class="u-loadmore-icon"
-                    :color="props.iconColor"
-                    :mode="props.iconType == 'circle' ? 'circle' : 'flower'"
-                    :show="props.status == 'loading' && props.icon"
-                ></u-loading>
-            </view>
-            <!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
-            <view
-                class="u-line-1"
-                :style="loadTextStyle"
-                :class="[props.status == 'nomore' && props.isDot == true ? 'u-dot-text' : 'u-more-text']"
-                @tap="loadMore"
-            >
-                {{ showText }}
-            </view>
-        </view>
-        <u-line color="#d4d4d4" length="50"></u-line>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { $u } from '../..';
-import { LoadmoreProps } from './types';
-
-defineOptions({ name: 'u-loadmore' });
-
-/**
- * loadmore 加载更多
- * @description 此组件一般用于标识页面底部加载数据时的状态。
- * @tutorial https://uviewpro.cn/zh/components/loadMore.html
- * @property {String} status 组件状态（默认loadmore）
- * @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
- * @property {Boolean} icon 加载中时是否显示图标（默认true）
- * @property {String} icon-type 加载中时的图标类型（默认circle）
- * @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
- * @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
- * @property {String} color 字体颜色（默认#606266）
- * @property {String|Number} margin-top 到上一个相邻元素的距离
- * @property {String|Number} margin-bottom 到下一个相邻元素的距离
- * @property {Object} load-text 自定义显示的文字，见上方说明示例
- * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
- * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
- */
-const props = defineProps(LoadmoreProps);
-const emits = defineEmits(['loadmore']);
-
-// 粗点
-const dotText = ref('●');
-
-// 加载的文字显示的样式
-const loadTextStyle = computed(() => {
-    return {
-        color: props.color,
-        fontSize: props.fontSize + 'rpx',
-        position: 'relative',
-        zIndex: 1,
-        backgroundColor: props.bgColor
-        // 如果是加载中状态，动画和文字需要距离近一点
-    };
-});
-
-// 加载中圆圈动画的样式
-const cricleStyle = computed(() => {
-    return {
-        borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${props.iconColor}`
-    };
-});
-
-// 加载中花朵动画形式
-// 动画由base64图片生成，暂不支持修改
-const flowerStyle = computed(() => {
-    return {};
-});
-
-// 显示的提示文字
-const showText = computed(() => {
-    let text = '';
-    if (props.status === 'loadmore') text = props.loadText.loadmore;
-    else if (props.status === 'loading') text = props.loadText.loading;
-    else if (props.status === 'nomore' && props.isDot) text = dotText.value;
-    else text = props.loadText.nomore;
-    return text;
-});
-
-/**
- * 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
- */
-function loadMore() {
-    if (props.status === 'loadmore') emits('loadmore');
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-/* #ifdef MP */
-// 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
-// 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
-u-line {
-    flex: none;
-}
-/* #endif */
-.u-load-more-wrap {
-    @include vue-flex;
-    justify-content: center;
-    align-items: center;
-}
-.u-load-more-inner {
-    @include vue-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 12rpx;
-}
-.u-more {
-    position: relative;
-    @include vue-flex;
-    justify-content: center;
-}
-.u-dot-text {
-    font-size: 28rpx;
-}
-.u-loadmore-icon-wrap {
-    margin-right: 8rpx;
-}
-.u-loadmore-icon {
-    @include vue-flex;
-    align-items: center;
-    justify-content: center;
-}
-</style>
+<template>
+    <view
+        class="u-load-more-wrap"
+        :style="{
+            backgroundColor: props.bgColor,
+            marginBottom: props.marginBottom + 'rpx',
+            marginTop: props.marginTop + 'rpx',
+            height: $u.addUnit(props.height)
+        }"
+    >
+        <u-line color="#d4d4d4" length="50"></u-line>
+        <!-- 加载中和没有更多的状态才显示两边的横线 -->
+        <view :class="props.status == 'loadmore' || props.status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
+            <view class="u-loadmore-icon-wrap">
+                <u-loading
+                    class="u-loadmore-icon"
+                    :color="props.iconColor"
+                    :mode="props.iconType == 'circle' ? 'circle' : 'flower'"
+                    :show="props.status == 'loading' && props.icon"
+                ></u-loading>
+            </view>
+            <!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
+            <view
+                class="u-line-1"
+                :style="loadTextStyle"
+                :class="[props.status == 'nomore' && props.isDot == true ? 'u-dot-text' : 'u-more-text']"
+                @tap="loadMore"
+            >
+                {{ showText }}
+            </view>
+        </view>
+        <u-line color="#d4d4d4" length="50"></u-line>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-loadmore',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { $u } from '../..';
+import { LoadmoreProps } from './types';
+
+/**
+ * loadmore 加载更多
+ * @description 此组件一般用于标识页面底部加载数据时的状态。
+ * @tutorial https://uviewpro.cn/zh/components/loadMore.html
+ * @property {String} status 组件状态（默认loadmore）
+ * @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
+ * @property {Boolean} icon 加载中时是否显示图标（默认true）
+ * @property {String} icon-type 加载中时的图标类型（默认circle）
+ * @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
+ * @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
+ * @property {String} color 字体颜色（默认#606266）
+ * @property {String|Number} margin-top 到上一个相邻元素的距离
+ * @property {String|Number} margin-bottom 到下一个相邻元素的距离
+ * @property {Object} load-text 自定义显示的文字，见上方说明示例
+ * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
+ * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+ */
+const props = defineProps(LoadmoreProps);
+const emits = defineEmits(['loadmore']);
+
+// 粗点
+const dotText = ref('●');
+
+// 加载的文字显示的样式
+const loadTextStyle = computed(() => {
+    return {
+        color: props.color,
+        fontSize: props.fontSize + 'rpx',
+        position: 'relative',
+        zIndex: 1,
+        backgroundColor: props.bgColor
+        // 如果是加载中状态，动画和文字需要距离近一点
+    };
+});
+
+// 加载中圆圈动画的样式
+const cricleStyle = computed(() => {
+    return {
+        borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${props.iconColor}`
+    };
+});
+
+// 加载中花朵动画形式
+// 动画由base64图片生成，暂不支持修改
+const flowerStyle = computed(() => {
+    return {};
+});
+
+// 显示的提示文字
+const showText = computed(() => {
+    let text = '';
+    if (props.status === 'loadmore') text = props.loadText.loadmore;
+    else if (props.status === 'loading') text = props.loadText.loading;
+    else if (props.status === 'nomore' && props.isDot) text = dotText.value;
+    else text = props.loadText.nomore;
+    return text;
+});
+
+/**
+ * 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
+ */
+function loadMore() {
+    if (props.status === 'loadmore') emits('loadmore');
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+/* #ifdef MP */
+// 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
+// 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
+u-line {
+    flex: none;
+}
+/* #endif */
+.u-load-more-wrap {
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+}
+.u-load-more-inner {
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 12rpx;
+}
+.u-more {
+    position: relative;
+    @include vue-flex;
+    justify-content: center;
+}
+.u-dot-text {
+    font-size: 28rpx;
+}
+.u-loadmore-icon-wrap {
+    margin-right: 8rpx;
+}
+.u-loadmore-icon {
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

package/components/u-mask/types.ts

@@ -1,43 +1,40 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-mask 组件 props 类型定义
- * @description 遮罩层，支持自定义样式、缩放、动画等
- */
-export const MaskProps = {
-    /** 是否显示遮罩 */
-    show: {
-        type: Boolean,
-        default: false
-    },
-    /** 层级z-index */
-    zIndex: {
-        type: [Number, String] as PropType<number | string>,
-        default: ''
-    },
-    /** 用户自定义样式 */
-    customStyle: {
-        type: Object as PropType<Record<string, any>>,
-        default: () => ({})
-    },
-    /** 遮罩的动画样式，是否使用zoom进行scale进行缩放 */
-    zoom: {
-        type: Boolean,
-        default: true
-    },
-    /** 遮罩的过渡时间，单位为ms */
-    duration: {
-        type: [Number, String] as PropType<number | string>,
-        default: 300
-    },
-    /** 是否可以通过点击遮罩进行关闭 */
-    maskClickAble: {
-        type: Boolean,
-        default: true
-    }
-};
-
-/**
- * u-mask 组件 props 类型
- */
-export type MaskProps = ExtractPropTypes<typeof MaskProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-mask 组件 props 类型定义
+ * @description 遮罩层，支持自定义样式、缩放、动画等
+ */
+export const MaskProps = {
+    ...baseProps,
+    /** 是否显示遮罩 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 层级z-index */
+    zIndex: {
+        type: [Number, String] as PropType<number | string>,
+        default: ''
+    },
+    /** 遮罩的动画样式，是否使用zoom进行scale进行缩放 */
+    zoom: {
+        type: Boolean,
+        default: true
+    },
+    /** 遮罩的过渡时间，单位为ms */
+    duration: {
+        type: [Number, String] as PropType<number | string>,
+        default: 300
+    },
+    /** 是否可以通过点击遮罩进行关闭 */
+    maskClickAble: {
+        type: Boolean,
+        default: true
+    }
+};
+
+/**
+ * u-mask 组件 props 类型
+ */
+export type MaskProps = ExtractPropTypes<typeof MaskProps>;

package/components/u-mask/u-mask.vue

@@ -1,106 +1,113 @@
-<template>
-    <view
-        class="u-mask"
-        hover-stop-propagation
-        :style="[maskStyle, zoomStyle]"
-        @tap="click"
-        @touchmove.stop.prevent="() => {}"
-        :class="{
-            'u-mask-zoom': props.zoom,
-            'u-mask-show': props.show
-        }"
-    >
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { $u } from '../..';
-import { MaskProps } from './types';
-
-defineOptions({ name: 'u-mask' });
-
-/**
- * mask 遮罩
- * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
- * @tutorial https://uviewpro.cn/zh/components/mask.html
- * @property {Boolean} show 是否显示遮罩（默认false）
- * @property {String|Number} z-index z-index 层级（默认1070）
- * @property {Object} custom-style 自定义样式对象，见上方说明
- * @property {String|Number} duration 动画时长，单位毫秒（默认300）
- * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
- * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
- * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
- * @example <u-mask :show="show" @click="show = false"></u-mask>
- */
-const props = defineProps(MaskProps);
-const emit = defineEmits(['click']);
-
-// 缩放动画样式
-const zoomStyle = ref<{ transform: string }>({ transform: '' });
-// scale值
-const scale = 'scale(1.2, 1.2)';
-
-// 监听遮罩显示状态，动态设置缩放动画
-watch(
-    () => props.show,
-    n => {
-        if (n && props.zoom) {
-            // 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
-            zoomStyle.value.transform = 'scale(1, 1)';
-        } else if (!n && props.zoom) {
-            // 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
-            zoomStyle.value.transform = scale;
-        }
-    }
-);
-
-// 遮罩样式
-const maskStyle = computed(() => {
-    let style: Record<string, any> = {};
-    style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
-    if (props.show) style.zIndex = props.zIndex ? props.zIndex : $u.zIndex.mask;
-    else style.zIndex = -1;
-    style.transition = `all ${Number(props.duration) / 1000}s ease-in-out`;
-    // 判断用户传递的对象是否为空，不为空就进行合并
-    if (props.customStyle && Object.keys(props.customStyle).length) {
-        style = {
-            ...style,
-            ...props.customStyle
-        };
-    }
-    return style;
-});
-
-/**
- * 遮罩点击事件
- * maskClickAble为true时，点击遮罩发送click事件
- */
-function click() {
-    if (!props.maskClickAble) return;
-    emit('click');
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    transition: transform 0.3s;
-}
-
-.u-mask-show {
-    opacity: 1;
-}
-
-.u-mask-zoom {
-    transform: scale(1.2, 1.2);
-}
-</style>
+<template>
+    <view
+        class="u-mask"
+        hover-stop-propagation
+        :style="$u.toStyle(maskStyle, zoomStyle, customStyle)"
+        @tap="click"
+        @touchmove.stop.prevent="() => {}"
+        :class="[
+            {
+                'u-mask-zoom': props.zoom,
+                'u-mask-show': props.show
+            },
+            customClass
+        ]"
+    >
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-mask',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { $u } from '../..';
+import { MaskProps } from './types';
+
+/**
+ * mask 遮罩
+ * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+ * @tutorial https://uviewpro.cn/zh/components/mask.html
+ * @property {Boolean} show 是否显示遮罩（默认false）
+ * @property {String|Number} z-index z-index 层级（默认1070）
+ * @property {Object} custom-style 自定义样式对象，见上方说明
+ * @property {String|Number} duration 动画时长，单位毫秒（默认300）
+ * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
+ * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
+ * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
+ * @example <u-mask :show="show" @click="show = false"></u-mask>
+ */
+const props = defineProps(MaskProps);
+const emit = defineEmits(['click']);
+
+// 缩放动画样式
+const zoomStyle = ref<{ transform: string }>({ transform: '' });
+// scale值
+const scale = 'scale(1.2, 1.2)';
+
+// 监听遮罩显示状态，动态设置缩放动画
+watch(
+    () => props.show,
+    n => {
+        if (n && props.zoom) {
+            // 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
+            zoomStyle.value.transform = 'scale(1, 1)';
+        } else if (!n && props.zoom) {
+            // 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
+            zoomStyle.value.transform = scale;
+        }
+    }
+);
+
+// 遮罩样式
+const maskStyle = computed(() => {
+    let style: Record<string, any> = {};
+    style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+    if (props.show) style.zIndex = props.zIndex ? props.zIndex : $u.zIndex.mask;
+    else style.zIndex = -1;
+    style.transition = `all ${Number(props.duration) / 1000}s ease-in-out`;
+    return style;
+});
+
+/**
+ * 遮罩点击事件
+ * maskClickAble为true时，点击遮罩发送click事件
+ */
+function click() {
+    if (!props.maskClickAble) return;
+    emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: transform 0.3s;
+}
+
+.u-mask-show {
+    opacity: 1;
+}
+
+.u-mask-zoom {
+    transform: scale(1.2, 1.2);
+}
+</style>