uview-pro 0.0.1

package/components/u-loading/u-loading.vue

@@ -0,0 +1,111 @@
+<template>
+    <view v-if="show" class="u-loading" :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]"> </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+    name: 'u-loading'
+});
+
+/**
+ * loading 加载动画
+ * @description 此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+ * @tutorial https://www.uviewui.com/components/loading.html
+ * @property {String} mode 模式选择，见官网说明（默认circle）
+ * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
+ * @property {String|Number} size 加载图标的大小，单位rpx（默认34）
+ * @property {Boolean} show 是否显示动画（默认true）
+ * @example <u-loading mode="circle"></u-loading>
+ */
+
+const props = defineProps({
+    /**
+     * 动画的类型
+     * @default 'circle'
+     */
+    mode: { type: String, default: 'circle' },
+    /**
+     * 动画的颜色
+     * @default '#c7c7c7'
+     */
+    color: { type: String, default: '#c7c7c7' },
+    /**
+     * 加载图标的大小，单位rpx
+     * @default '34'
+     */
+    size: { type: [String, Number], default: '34' },
+    /**
+     * 是否显示动画
+     * @default true
+     */
+    show: { type: Boolean, default: true }
+});
+
+/**
+ * 加载中圆圈动画的样式
+ * @returns {Record<string, any>}
+ */
+const cricleStyle = computed(() => {
+    let style: Record<string, any> = {};
+    style.width = props.size + 'rpx';
+    style.height = props.size + 'rpx';
+    // 只对圆圈模式生效
+    if (props.mode === 'circle') {
+        style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
+    }
+    return style;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-loading-circle {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    vertical-align: middle;
+    width: 28rpx;
+    height: 28rpx;
+    background: 0 0;
+    border-radius: 50%;
+    border: 2px solid;
+    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+    animation: u-circle 1s linear infinite;
+}
+
+.u-loading-flower {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-animation: u-flower 1s steps(12) infinite;
+    animation: u-flower 1s steps(12) infinite;
+    background: transparent
+        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
+        no-repeat;
+    background-size: 100%;
+}
+
+@keyframes u-flower {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(1turn);
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes u-circle {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

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

@@ -0,0 +1,205 @@
+<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 '../..';
+
+defineOptions({ name: 'u-loadmore' });
+
+/**
+ * loadmore 加载更多
+ * @description 此组件一般用于标识页面底部加载数据时的状态。
+ * @tutorial https://www.uviewui.com/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({
+    // 组件背景色
+    bgColor: {
+        type: String,
+        default: 'transparent'
+    },
+    // 是否显示加载中的图标
+    icon: {
+        type: Boolean,
+        default: true
+    },
+    // 字体大小
+    fontSize: {
+        type: String,
+        default: '28'
+    },
+    // 字体颜色
+    color: {
+        type: String,
+        default: '#606266'
+    },
+    // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
+    status: {
+        type: String,
+        default: 'loadmore'
+    },
+    // 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
+    iconType: {
+        type: String,
+        default: 'circle'
+    },
+    // 显示的文字
+    loadText: {
+        type: Object as () => { loadmore: string; loading: string; nomore: string },
+        default: () => ({
+            loadmore: '加载更多',
+            loading: '正在加载...',
+            nomore: '没有更多了'
+        })
+    },
+    // 在“没有更多”状态下，是否显示粗点
+    isDot: {
+        type: Boolean,
+        default: false
+    },
+    // 加载中显示圆圈动画时，动画的颜色
+    iconColor: {
+        type: String,
+        default: '#b7b7b7'
+    },
+    // 上边距
+    marginTop: {
+        type: [String, Number],
+        default: 0
+    },
+    // 下边距
+    marginBottom: {
+        type: [String, Number],
+        default: 0
+    },
+    // 高度，单位rpx
+    height: {
+        type: [String, Number],
+        default: 'auto'
+    }
+});
+
+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/u-mask.vue

@@ -0,0 +1,137 @@
+<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 '../..';
+
+defineOptions({ name: 'u-mask' });
+
+/**
+ * mask 遮罩
+ * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+ * @tutorial https://www.uviewui.com/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({
+    // 是否显示遮罩
+    show: {
+        type: Boolean,
+        default: false
+    },
+    // 层级z-index
+    zIndex: {
+        type: [Number, String],
+        default: ''
+    },
+    // 用户自定义样式
+    customStyle: {
+        type: Object,
+        default: () => ({})
+    },
+    // 遮罩的动画样式， 是否使用zoom进行scale进行缩放
+    zoom: {
+        type: Boolean,
+        default: true
+    },
+    // 遮罩的过渡时间，单位为ms
+    duration: {
+        type: [Number, String],
+        default: 300
+    },
+    // 是否可以通过点击遮罩进行关闭
+    maskClickAble: {
+        type: Boolean,
+        default: true
+    }
+});
+
+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>