uview-pro 0.0.1

package/components/u-image/u-image.vue

@@ -0,0 +1,218 @@
+<template>
+    <view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
+        <image
+            v-if="!isError"
+            :src="src"
+            :mode="mode"
+            @error="onErrorHandler"
+            @load="onLoadHandler"
+            :lazy-load="lazyLoad"
+            class="u-image__image"
+            :show-menu-by-longpress="showMenuByLongpress"
+            :style="{ borderRadius: shape === 'circle' ? '50%' : $u.addUnit(borderRadius) }"
+        ></image>
+        <view v-if="showLoading && loading" class="u-image__loading" :style="{ borderRadius: shape === 'circle' ? '50%' : $u.addUnit(borderRadius), backgroundColor: bgColor }">
+            <slot v-if="$slots.loading" name="loading" />
+            <u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon>
+        </view>
+        <view v-if="showError && isError && !loading" class="u-image__error" :style="{ borderRadius: shape === 'circle' ? '50%' : $u.addUnit(borderRadius) }">
+            <slot v-if="$slots.error" name="error" />
+            <u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, useSlots } from 'vue';
+import { type ImageExpose, ImageProps } from './types';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-image'
+});
+
+/**
+ * Image 图片
+ * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @tutorial https://uviewui.com/components/image.html
+ * @property {String} src 图片地址
+ * @property {String} mode 裁剪模式，见官网说明
+ * @property {String | Number} width 宽度，单位任意，如果为数值，则为rpx单位（默认100%）
+ * @property {String | Number} height 高度，单位任意，如果为数值，则为rpx单位（默认 auto）
+ * @property {String} shape 图片形状，circle-圆形，square-方形（默认square）
+ * @property {String | Number} border-radius 圆角值，单位任意，如果为数值，则为rpx单位（默认 0）
+ * @property {Boolean} lazy-load 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效（默认 true）
+ * @property {Boolean} show-menu-by-longpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效（默认 false）
+ * @property {String} loading-icon 加载中的图标，或者小图片（默认 photo）
+ * @property {String} error-icon 加载失败的图标，或者小图片（默认 error-circle）
+ * @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot（默认 true）
+ * @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot（默认 true）
+ * @property {Boolean} fade 是否需要淡入效果（默认 true）
+ * @property {Boolean} webp 只支持网络资源，只对微信小程序有效（默认 false）
+ * @property {String | Number} duration 搭配fade参数的过渡时间，单位ms（默认 500）
+ * @property {String} bg-color 背景颜色，用于深色页面加载图片时，为了和背景色融合（默认 #f3f4f6）
+ * @event {Function} click 点击图片时触发
+ * @event {Function} error 图片加载失败时触发
+ * @event {Function} load 图片加载成功时触发
+ * @example <u-image width="100%" height="300rpx" :src="src"></u-image>
+ */
+
+const emit = defineEmits<{
+    (e: 'click'): void;
+    (e: 'error', err: any): void;
+    (e: 'load'): void;
+}>();
+
+const props = defineProps(ImageProps);
+
+// 图片是否加载错误，如果是，则显示错误占位图
+const isError = ref(false);
+// 初始化组件时，默认为加载中状态
+const loading = ref(true);
+// 不透明度，为了实现淡入淡出的效果
+const opacity = ref(1);
+// 过渡时间，因为props的值无法修改，故需要一个中间值
+const durationTime = ref(props.duration);
+// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+const backgroundStyle = ref<Record<string, any>>({});
+
+// 监听src变化，处理加载状态
+watch(
+    () => props.src,
+    n => {
+        if (!n) {
+            // 如果传入null或者''，或者false，或者undefined，标记为错误状态
+            isError.value = true;
+            loading.value = false;
+        } else {
+            isError.value = false;
+            loading.value = true;
+        }
+    },
+    { immediate: true }
+);
+
+/**
+ * 计算图片外层包裹样式
+ * @returns {Record<string, any>}
+ */
+const wrapStyle = computed(() => {
+    let style: Record<string, any> = {};
+    // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+    style.width = $u.addUnit(props.width);
+    style.height = $u.addUnit(props.height);
+    // 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值
+    style.borderRadius = props.shape === 'circle' ? '50%' : $u.addUnit(props.borderRadius);
+    // 如果设置圆角，必须要有hidden，否则可能圆角无效
+    style.overflow = Number(props.borderRadius) > 0 ? 'hidden' : 'visible';
+    if (props.fade) {
+        style.opacity = opacity.value;
+        style.transition = `opacity ${Number(durationTime.value) / 1000}s ease-in-out`;
+    }
+    return style;
+});
+
+/**
+ * 点击图片
+ * @emits click
+ */
+function onClick() {
+    emit('click');
+}
+
+/**
+ * 图片加载失败
+ * @param err 失败事件对象
+ * @emits error
+ */
+function onErrorHandler(err: any) {
+    loading.value = false;
+    isError.value = true;
+    emit('error', err);
+}
+
+/**
+ * 图片加载完成，标记loading结束
+ * @emits load
+ */
+function onLoadHandler() {
+    loading.value = false;
+    isError.value = false;
+    emit('load');
+    // 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
+    // 否则无需fade效果时，png图片依然能看到下方的背景色
+    if (!props.fade) return removeBgColor();
+    // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
+    opacity.value = 0;
+    // 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
+    // 到图片展示的过程中的淡入效果
+    durationTime.value = 0;
+    // 延时50ms，否则在浏览器H5，过渡效果无效
+    setTimeout(() => {
+        durationTime.value = props.duration;
+        opacity.value = 1;
+        setTimeout(() => {
+            removeBgColor();
+        }, Number(durationTime.value));
+    }, 50);
+}
+
+/**
+ * 移除图片的背景色
+ * 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+ */
+function removeBgColor() {
+    backgroundStyle.value = {
+        backgroundColor: 'transparent'
+    };
+}
+
+function changeStatus(status: 'loading' | 'error' | 'normal') {
+    if (status === 'loading') {
+        loading.value = true;
+        isError.value = false;
+    } else if (status === 'error') {
+        loading.value = false;
+        isError.value = true;
+    } else {
+        loading.value = false;
+        isError.value = false;
+    }
+}
+
+// 暴露给模板
+const $slots = useSlots();
+
+defineExpose<ImageExpose>({
+    changeStatus
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-image {
+    position: relative;
+    transition: opacity 0.5s ease-in-out;
+
+    &__image {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__loading,
+    &__error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        @include vue-flex;
+        align-items: center;
+        justify-content: center;
+        background-color: $u-bg-color;
+        color: $u-tips-color;
+        font-size: 46rpx;
+    }
+}
+</style>

package/components/u-index-anchor/u-index-anchor.vue

@@ -0,0 +1,101 @@
+<template>
+    <!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+    <view>
+        <view class="u-index-anchor-wrapper" :id="$u.guid()" :style="wrapperStyle">
+            <view class="u-index-anchor" :class="[active ? 'u-index-anchor--active' : '']" :style="customAnchorStyle">
+                <slot v-if="useSlot" />
+                <template v-else>
+                    <text>{{ index }}</text>
+                </template>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-index-anchor'
+});
+
+/**
+ * indexAnchor 索引列表锚点
+ * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+ * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+ * @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false）
+ * @property {String|Number} index 索引字符，如果定义了use-slot，此参数自动失效
+ * @property {Object} customStyle 自定义样式，对象形式，如"{color: 'red'}"
+ * @event {Function} default 锚点位置显示内容，默认为索引字符
+ * @example <u-index-anchor :index="item" />
+ */
+
+const props = defineProps({
+    /** 是否使用自定义内容的插槽 */
+    useSlot: {
+        type: Boolean,
+        default: false
+    },
+    /** 索引字符，如果定义了use-slot，此参数自动失效 */
+    index: {
+        type: String,
+        default: ''
+    },
+    /** 自定义样式，对象形式 */
+    customStyle: {
+        type: Object as () => Record<string, any>,
+        default: () => ({})
+    }
+});
+
+// 响应式变量
+const active = ref(false);
+const wrapperStyle = ref<Record<string, any>>({});
+const anchorStyle = ref<Record<string, any>>({});
+let parent: any = null;
+
+// 计算属性：合并 anchorStyle 和 customStyle
+const customAnchorStyle = computed(() => {
+    return Object.assign({}, anchorStyle.value, props.customStyle);
+});
+
+const instance = getCurrentInstance();
+
+// 挂载时查找父组件并注册
+onMounted(() => {
+    parent = $u.$parent('u-index-list', instance);
+    if (parent) {
+        parent.exposed?.children.push(instance);
+        parent.exposed?.updateData();
+    }
+});
+defineExpose({
+    active,
+    wrapperStyle,
+    anchorStyle,
+    props
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-index-anchor {
+    box-sizing: border-box;
+    padding: 14rpx 24rpx;
+    color: #606266;
+    width: 100%;
+    font-weight: 500;
+    font-size: 28rpx;
+    line-height: 1.2;
+    background-color: rgb(245, 245, 245);
+}
+
+.u-index-anchor--active {
+    right: 0;
+    left: 0;
+    color: #2979ff;
+    background-color: #fff;
+}
+</style>

package/components/u-index-list/u-index-list.vue

@@ -0,0 +1,376 @@
+<template>
+    <!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+    <view>
+        <view class="u-index-bar">
+            <slot />
+            <view
+                v-if="showSidebar"
+                class="u-index-bar__sidebar"
+                @touchstart.stop.prevent="onTouchMove"
+                @touchmove.stop.prevent="onTouchMove"
+                @touchend.stop.prevent="onTouchStop"
+                @touchcancel.stop.prevent="onTouchStop"
+            >
+                <view
+                    v-for="(item, index) in indexList"
+                    :key="index"
+                    class="u-index-bar__index"
+                    :style="{ zIndex: Number(zIndex) + 1, color: activeAnchorIndex === index ? activeColor : '' }"
+                    :data-index="index"
+                >
+                    {{ item }}
+                </view>
+            </view>
+            <view
+                class="u-indexed-list-alert"
+                v-if="touchmove && indexList[touchmoveIndex]"
+                :style="{
+                    zIndex: alertZIndex
+                }"
+            >
+                <text>{{ indexList[touchmoveIndex] }}</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+// 索引列表生成函数
+function getIndexList() {
+    const indexList: string[] = [];
+    const charCodeOfA = 'A'.charCodeAt(0);
+    for (let i = 0; i < 26; i++) {
+        indexList.push(String.fromCharCode(charCodeOfA + i));
+    }
+    return indexList;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-index-list'
+});
+
+/**
+ * indexList 索引列表
+ * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+ * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+ * @property {Number|String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入
+ * @property {Array} index-list 索引字符列表，数组（默认A-Z）
+ * @property {Number|String} z-index 锚点吸顶时的层级（默认965）
+ * @property {Boolean} sticky 是否开启锚点自动吸顶（默认true）
+ * @property {Number|String} offset-top 锚点自动吸顶时与顶部的距离（默认0）
+ * @property {String} highlight-color 锚点和右边索引字符高亮颜色（默认#2979ff）
+ * @event {Function} select 选中右边索引字符时触发
+ * @example <u-index-list :scrollTop="scrollTop"></u-index-list>
+ */
+const props = defineProps({
+    /** 是否开启锚点自动吸顶 */
+    sticky: {
+        type: Boolean,
+        default: true
+    },
+    /** 锚点吸顶时的层级 */
+    zIndex: {
+        type: [Number, String],
+        default: ''
+    },
+    /** 当前滚动高度 */
+    scrollTop: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 锚点自动吸顶时与顶部的距离 */
+    offsetTop: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 索引字符列表 */
+    indexList: {
+        type: Array,
+        default: () => getIndexList()
+    },
+    /** 锚点和右边索引字符高亮颜色 */
+    activeColor: {
+        type: String,
+        default: '#2979ff'
+    }
+});
+
+const emit = defineEmits(['select']);
+const instance = getCurrentInstance();
+
+// 变量定义
+const activeAnchorIndex = ref(0);
+const showSidebar = ref(true);
+const touchmove = ref(false);
+const touchmoveIndex = ref(0);
+// 孩子锚点组件
+const children = reactive<any[]>([]);
+const sidebar = reactive<{ height: number; top: number }>({ height: 0, top: 0 });
+const scrollToAnchorIndex = ref<number | null>(null);
+const timer = ref<any>(null);
+const top = ref(0);
+const height = ref(0);
+const stickyOffsetTop = ref(0);
+
+// 计算属性
+// 弹出toast的z-index值
+const alertZIndex = computed(() => $u.zIndex.toast).value;
+// indexList 响应式
+const indexList = computed(() => props.indexList).value;
+const zIndex = computed(() => props.zIndex).value;
+const activeColor = computed(() => props.activeColor).value;
+
+// 只能在created生命周期定义children，如果在data定义，会因为循环引用而报错
+children.length = 0;
+
+// 兼容 H5/非H5 stickyOffsetTop
+onMounted(() => {
+    const offsetTopNum = typeof props.offsetTop === 'string' ? Number(props.offsetTop) : props.offsetTop;
+    // #ifdef H5
+    stickyOffsetTop.value = offsetTopNum ? uni.upx2px(offsetTopNum) : 44;
+    // #endif
+    // #ifndef H5
+    stickyOffsetTop.value = offsetTopNum ? uni.upx2px(offsetTopNum) : 0;
+    // #endif
+});
+
+// 监听 scrollTop
+watch(
+    () => props.scrollTop,
+    () => {
+        updateData();
+    }
+);
+
+function updateData() {
+    if (timer.value) clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+        showSidebar.value = !!children.length;
+        setRect().then(() => {
+            onScroll();
+        });
+    }, 0);
+}
+
+/**
+ * 获取各区域尺寸
+ */
+function setRect() {
+    return Promise.all([setAnchorsRect(), setListRect(), setSiderbarRect()]);
+}
+
+/**
+ * 获取锚点尺寸
+ */
+function setAnchorsRect() {
+    return Promise.all(
+        children.map((anchor, index) => {
+            $u.getRect('.u-index-anchor-wrapper', anchor).then((rect: any) => {
+                Object.assign(anchor, {
+                    height: rect.height,
+                    top: rect.top
+                });
+            });
+        })
+    );
+}
+
+/**
+ * 获取列表尺寸
+ */
+function setListRect() {
+    return $u.getRect('.u-index-bar', instance).then((rect: any) => {
+        height.value = rect.height;
+        top.value = rect.top + Number(props.scrollTop);
+    });
+}
+
+/**
+ * 获取侧边栏尺寸
+ */
+function setSiderbarRect() {
+    return $u.getRect('.u-index-bar__sidebar', instance).then((rect: any) => {
+        sidebar.height = rect.height;
+        sidebar.top = rect.top;
+    });
+}
+
+/**
+ * 获取当前激活锚点索引
+ */
+function getActiveAnchorIndex() {
+    const sticky = props.sticky;
+    for (let i = children.length - 1; i >= 0; i--) {
+        const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+        const reachTop = sticky ? preAnchorHeight : 0;
+        if (reachTop >= children[i].top) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+/**
+ * 滚动时处理锚点吸顶和样式
+ */
+function onScroll() {
+    if (!children.length) return;
+    const sticky = props.sticky;
+    const scrollTopNum = Number(props.scrollTop);
+    const active = getActiveAnchorIndex();
+    activeAnchorIndex.value = active;
+    if (sticky) {
+        let isActiveAnchorSticky = false;
+        if (active !== -1) {
+            isActiveAnchorSticky = children[active].top <= 0;
+        }
+        children.forEach((item, index) => {
+            if (index === active) {
+                let wrapperStyle: any = '';
+                let anchorStyle: any = {
+                    color: `${activeColor}`
+                };
+                if (isActiveAnchorSticky) {
+                    wrapperStyle = { height: `${children[index].height}px` };
+                    anchorStyle = {
+                        position: 'fixed',
+                        top: `${stickyOffsetTop.value}px`,
+                        zIndex: `${zIndex ? zIndex : $u.zIndex.indexListSticky}`,
+                        color: `${activeColor}`
+                    };
+                }
+                item.active = active;
+                item.wrapperStyle = wrapperStyle;
+                item.anchorStyle = anchorStyle;
+            } else if (index === active - 1) {
+                const currentAnchor = children[index];
+                const currentOffsetTop = currentAnchor.top;
+                const targetOffsetTop = index === children.length - 1 ? top.value : children[index + 1].top;
+                const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+                const translateY = parentOffsetHeight - currentAnchor.height;
+                const anchorStyle = {
+                    position: 'relative',
+                    transform: `translate3d(0, ${translateY}px, 0)`,
+                    zIndex: `${zIndex ? zIndex : $u.zIndex.indexListSticky}`,
+                    color: `${activeColor}`
+                };
+                item.active = active;
+                item.anchorStyle = anchorStyle;
+            } else {
+                item.active = false;
+                item.anchorStyle = '';
+                item.wrapperStyle = '';
+            }
+            item.exposed.active = item.active;
+            item.exposed.anchorStyle = item.anchorStyle;
+            item.exposed.wrapperStyle = item.wrapperStyle;
+        });
+    }
+}
+
+/**
+ * 侧边栏触摸移动
+ */
+function onTouchMove(event: TouchEvent) {
+    touchmove.value = true;
+    const sidebarLength = children.length;
+    const touch = event.touches[0];
+    const itemHeight = sidebar.height / sidebarLength;
+    let clientY = touch.clientY;
+    let index = Math.floor((clientY - sidebar.top) / itemHeight);
+    if (index < 0) {
+        index = 0;
+    } else if (index > sidebarLength - 1) {
+        index = sidebarLength - 1;
+    }
+    touchmoveIndex.value = index;
+    scrollToAnchor(index);
+}
+
+/**
+ * 侧边栏触摸结束
+ */
+function onTouchStop() {
+    touchmove.value = false;
+    scrollToAnchorIndex.value = null;
+}
+
+/**
+ * 滚动到指定锚点
+ */
+function scrollToAnchor(index: number) {
+    if (scrollToAnchorIndex.value === index) {
+        return;
+    }
+    scrollToAnchorIndex.value = index;
+    const anchor = children.find(item => item.props.index === indexList[index]);
+    if (anchor) {
+        emit('select', anchor.props.index);
+        uni.pageScrollTo({
+            duration: 0,
+            scrollTop: anchor.top + Number(props.scrollTop)
+        });
+    }
+}
+
+defineExpose({
+    updateData,
+    setRect,
+    onScroll,
+    children
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-index-bar {
+    position: relative;
+}
+
+.u-index-bar__sidebar {
+    position: fixed;
+    top: 50%;
+    right: 0;
+    @include vue-flex;
+    flex-direction: column;
+    text-align: center;
+    transform: translateY(-50%);
+    user-select: none;
+    z-index: 99;
+}
+
+.u-index-bar__index {
+    font-weight: 500;
+    padding: 8rpx 18rpx;
+    font-size: 22rpx;
+    line-height: 1;
+}
+
+.u-indexed-list-alert {
+    position: fixed;
+    width: 120rpx;
+    height: 120rpx;
+    right: 90rpx;
+    top: 50%;
+    margin-top: -60rpx;
+    border-radius: 24rpx;
+    font-size: 50rpx;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.65);
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    z-index: 9999999;
+}
+
+.u-indexed-list-alert text {
+    line-height: 50rpx;
+}
+</style>