uview-ultra-plus 1.0.0

package/uview-ultra/components/up-album/up-album.vue

@@ -0,0 +1,278 @@
+<template>
+    <view class="up-album">
+        <view
+            class="up-album__row"
+            ref="up-album__row"
+            v-for="(arr, index) in showUrls"
+            :forComputedUse="albumWidth"
+            :key="index"
+            :style="{flexWrap: autoWrap ? 'wrap' : 'nowrap'}"
+        >
+            <view
+                class="up-album__row__wrapper"
+                v-for="(item, index1) in arr"
+                :key="index1"
+                :style="[imageStyle(index + 1, index1 + 1)]"
+                @tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
+            >
+                <image
+                    :src="getSrc(item)"
+                    :mode="
+                        urls.length === 1
+                            ? imageHeight > 0
+                                ? singleMode
+                                : 'widthFix'
+                            : multipleMode
+                    "
+                    :style="[
+                        {
+                            width: imageWidth,
+                            height: imageHeight,
+                            borderRadius: shape == 'circle' ? '10000px' : addUnit(radius)
+                        }
+                    ]"
+                ></image>
+                <view
+                    v-if="
+                        showMore &&
+                        urls.length > rowCount * showUrls.length &&
+                        index === showUrls.length - 1 &&
+                        index1 === showUrls[showUrls.length - 1].length - 1
+                    "
+                    class="up-album__row__wrapper__text"
+                    :style="{
+					    borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+				    }"
+                >
+                    <up-text
+                        :text="`+${urls.length - maxCount}`"
+                        color="#fff"
+                        :size="multipleSize * 0.3"
+                        align="center"
+                        customStyle="justify-content: center"
+                    ></up-text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { props } from './props.js';
+import { mpMixin } from '../../libs/mixin/mpMixin.js';
+import { mixin } from '../../libs/mixin/mixin.js';
+import { addUnit, sleep } from '../../libs/function/index.js';
+import test from '../../libs/function/test.js';
+// #ifdef APP-NVUE
+// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+/**
+ * Album 相册
+ * @description 本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码
+ * @tutorial https://ijry.github.io/uview-plus/components/album.html
+ *
+ * @property {Array}           urls             图片地址列表 Array<String>|Array<Object>形式
+ * @property {String}          keyName          指定从数组的对象元素中读取哪个属性作为图片地址
+ * @property {String | Number} singleSize       单图时，图片长边的长度  （默认 180 ）
+ * @property {String | Number} multipleSize     多图时，图片边长 （默认 70 ）
+ * @property {String | Number} space            多图时，图片水平和垂直之间的间隔 （默认 6 ）
+ * @property {String}          singleMode       单图时，图片缩放裁剪的模式 （默认 'scaleToFill' ）
+ * @property {String}          multipleMode     多图时，图片缩放裁剪的模式 （默认 'aspectFill' ）
+ * @property {String | Number} maxCount         取消按钮的提示文字 （默认 9 ）
+ * @property {Boolean}         previewFullImage 是否可以预览图片 （默认 true ）
+ * @property {String | Number} rowCount         每行展示图片数量，如设置，singleSize和multipleSize将会无效	（默认 3 ）
+ * @property {Boolean}         showMore         超出maxCount时是否显示查看更多的提示 （默认 true ）
+ * @property {String}          shape            图片形状，circle-圆形，square-方形 （默认 'square' ）
+ * @property {String | Number} radius           圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+ * @property {Boolean}         autoWrap         自适应换行模式，不受rowCount限制，图片会自动换行 （默认 false ）
+ * @property {String}          unit             图片单位 （默认 px ）
+ * @event    {Function}        albumWidth       某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送  （回调参数 width ）
+ * @example <up-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></up-album>
+ */
+export default {
+    name: 'up-album',
+    mixins: [mpMixin, mixin, props],
+    data() {
+        return {
+            // 单图的宽度
+            singleWidth: 0,
+            // 单图的高度
+            singleHeight: 0,
+            // 单图时，如果无法获取图片的尺寸信息，让图片宽度默认为容器的一定百分比
+            singlePercent: 0.6
+        }
+    },
+    watch: {
+        urls: {
+            immediate: true,
+            handler(newVal) {
+                if (newVal.length === 1) {
+                    this.getImageRect()
+                }
+            }
+        }
+    },
+	emits: ["albumWidth"],
+    computed: {
+        imageStyle() {
+            return (index1, index2) => {
+                const { space, rowCount, multipleSize, urls } = this,
+                    { addUnit, addStyle } = uni.$u,
+                    rowLen = this.showUrls.length,
+                    allLen = this.urls.length
+                const style = {
+                    marginRight: addUnit(space),
+                    marginBottom: addUnit(space)
+                }
+                // 如果为最后一行，则每个图片都无需下边框
+                if (index1 === rowLen && !this.autoWrap) style.marginBottom = 0
+                // 每行的最右边一张和总长度的最后一张无需右边框
+                if (!this.autoWrap) {
+                    if (
+                        index2 === rowCount ||
+                        (index1 === rowLen &&
+                            index2 === this.showUrls[index1 - 1].length)
+                    )
+                        style.marginRight = 0
+                }
+                return style
+            }
+        },
+        // 将数组划分为二维数组
+        showUrls() {
+            if (this.autoWrap) {
+                return [ this.urls.slice(0, this.maxCount) ];
+            } else {
+                const arr = []
+                this.urls.map((item, index) => {
+                    // 限制最大展示数量
+                    if (index + 1 <= this.maxCount) {
+                        // 计算该元素为第几个素组内
+                        const itemIndex = Math.floor(index / this.rowCount)
+                        // 判断对应的索引是否存在
+                        if (!arr[itemIndex]) {
+                            arr[itemIndex] = []
+                        }
+                        arr[itemIndex].push(item)
+                    }
+                })
+                return arr
+            }
+        },
+        imageWidth() {
+            return addUnit(
+                this.urls.length === 1 ? this.singleWidth : this.multipleSize, this.unit
+            )
+        },
+        imageHeight() {
+            return addUnit(
+                this.urls.length === 1 ? this.singleHeight : this.multipleSize, this.unit
+            )
+        },
+        // 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
+        // 因为用户在某些特殊的情况下，需要让文字与相册的宽度相等，所以这里事件的形式对外发送
+        albumWidth() {
+            let width = 0
+            if (this.urls.length === 1) {
+                width = this.singleWidth
+            } else {
+                width =
+                    this.showUrls[0].length * this.multipleSize +
+                    this.space * (this.showUrls[0].length - 1)
+            }
+            this.$emit('albumWidth', width)
+            return width
+        }
+    },
+    methods: {
+        addUnit,
+        // 预览图片
+        onPreviewTap(url) {
+            const urls = this.urls.map((item) => {
+                return this.getSrc(item)
+            })
+            uni.previewImage({
+                current: url,
+                urls
+            })
+        },
+        // 获取图片的路径
+        getSrc(item) {
+            return test.object(item)
+                ? (this.keyName && item[this.keyName]) || item.src
+                : item
+        },
+        // 单图时，获取图片的尺寸
+        // 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
+        // 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
+        getImageRect() {
+            const src = this.getSrc(this.urls[0])
+            uni.getImageInfo({
+                src,
+                success: (res) => {
+                    // 判断图片横向还是竖向展示方式
+                    const isHorizotal = res.width >= res.height
+                    this.singleWidth = isHorizotal
+                        ? this.singleSize
+                        : (res.width / res.height) * this.singleSize
+                    this.singleHeight = !isHorizotal
+                        ? this.singleSize
+                        : (res.height / res.width) * this.singleWidth
+                },
+                fail: () => {
+                    this.getComponentWidth()
+                }
+            })
+        },
+        // 获取组件的宽度
+        async getComponentWidth() {
+            // 延时一定时间，以获取dom尺寸
+            await sleep(30)
+            // #ifndef APP-NVUE
+            this.$uGetRect('.up-album__row').then((size) => {
+                this.singleWidth = size.width * this.singlePercent
+            })
+            // #endif
+
+            // #ifdef APP-NVUE
+            // 这里ref="up-album__row"所在的标签为通过for循环出来，导致this.$refs['up-album__row']是一个数组
+            const ref = this.$refs['up-album__row'][0]
+            ref &&
+                dom.getComponentRect(ref, (res) => {
+                    this.singleWidth = res.size.width * this.singlePercent
+                })
+            // #endif
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/components.scss';
+
+.up-album {
+    @include flex(column);
+
+    &__row {
+        @include flex(row);
+
+        &__wrapper {
+            position: relative;
+
+            &__text {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0.3);
+                @include flex(row);
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+}
+</style>

package/uview-ultra/components/up-alert/alert.js

@@ -0,0 +1,22 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/alert.js
+ */
+export default {
+    // alert警告组件
+    alert: {
+        title: '',
+        type: 'warning',
+        description: '',
+        closable: false,
+        showIcon: false,
+        effect: 'light',
+        center: false,
+        fontSize: 14
+    }
+}

package/uview-ultra/components/up-alert/alert.uts

@@ -0,0 +1,22 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-12-23 11:27:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-12-23 11:27:21
+ * @FilePath     : /uview-ultra/libs/config/props/alert
+ */
+export default {
+    // alert警告组件
+    alert: {
+        title: '',
+        type: 'warning',
+        description: '',
+        closable: false,
+        showIcon: false,
+        effect: 'light',
+        center: false,
+        fontSize: 14
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-alert/props.js

@@ -0,0 +1,46 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from './alert.js'
+export const props = defineMixin({
+    props: {
+        // 显示文字
+        title: {
+            type: String,
+            default: () => defProps.alert.title
+        },
+        // 主题，success/warning/info/error
+        type: {
+            type: String,
+            default: () => defProps.alert.type
+        },
+        // 辅助性文字
+        description: {
+            type: String,
+            default: () => defProps.alert.description
+        },
+        // 是否可关闭
+        closable: {
+            type: Boolean,
+            default: () => defProps.alert.closable
+        },
+        // 是否显示图标
+        showIcon: {
+            type: Boolean,
+            default: () => defProps.alert.showIcon
+        },
+        // 浅或深色调，light-浅色，dark-深色
+        effect: {
+            type: String,
+            default: () => defProps.alert.effect
+        },
+        // 文字是否居中
+        center: {
+            type: Boolean,
+            default: () => defProps.alert.center
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.alert.fontSize
+        }
+    }
+})

package/uview-ultra/components/up-alert/props.uts

@@ -0,0 +1,48 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './alert'
+let crtProp = defProps['alert'] as UTSJSONObject
+
+export const propsAlert = defineMixin({
+    props: {
+        // 显示文字
+        title: {
+            type: String,
+            default: crtProp['title']
+        },
+        // 主题，success/warning/info/error
+        type: {
+            type: String,
+            default: crtProp['type']
+        },
+        // 辅助性文字
+        description: {
+            type: String,
+            default: crtProp['description']
+        },
+        // 是否可关闭
+        closable: {
+            type: Boolean,
+            default: crtProp['closable']
+        },
+        // 是否显示图标
+        showIcon: {
+            type: Boolean,
+            default: crtProp['showIcon']
+        },
+        // 浅或深色调，light-浅色，dark-深色
+        effect: {
+            type: String,
+            default: crtProp['effect']
+        },
+        // 文字是否居中
+        center: {
+            type: Boolean,
+            default: crtProp['center']
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: crtProp['fontSize']
+        }
+    }
+})

package/uview-ultra/components/up-alert/up-alert.uvue

@@ -0,0 +1,287 @@
+<template>
+	<up-transition
+	    mode="fade"
+	    :show="show"
+	>
+		<view
+		    class="up-alert"
+		    :class="[`up-alert--${type}--${effect}`]"
+		    @tap.stop="clickHandler"
+		    :style="[$upAddStyle(customStyle)]"
+		>
+			<view
+			    class="up-alert__icon"
+			    v-if="showIcon"
+			>
+				<up-icon
+				    :name="iconName"
+				    size="18"
+				    :color="iconColor"
+				></up-icon>
+			</view>
+			<view
+			    class="up-alert__content"
+			    :style="[{
+					paddingRight: closable ? '20px' : 0
+				}]"
+			>
+				<text
+				    class="up-alert__content__title"
+				    v-if="title"
+					:style="[style1]"
+				    :class="[effect === 'dark' ? 'up-alert__text--dark' : `up-alert__text--${type}--light`]"
+				>{{ title }}</text>
+				<text
+				    class="up-alert__content__desc"
+					v-if="description"
+					:style="[style1]"
+				    :class="[effect === 'dark' ? 'up-alert__text--dark' : `up-alert__text--${type}--light`]"
+				>{{ description }}</text>
+			</view>
+			<view
+			    class="up-alert__close"
+			    v-if="closable"
+			    @tap.stop="closeHandler"
+			>
+				<up-icon
+				    name="close"
+				    :color="iconColor"
+				    size="15"
+				></up-icon>
+			</view>
+		</view>
+	</up-transition>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { mpSharedMpOptions } from '../../libs/composable/useMp'
+import { addUnit, addStyle } from '../../libs/function/index'
+import defProps from './alert'
+
+// options
+defineOptions({
+  //...mpSharedMpOptions,
+  name: 'up-alert'
+})
+
+// 定义props
+const props = defineProps({
+    // 主题，success/warning/info/error
+    type: {
+        type: String,
+        default: defProps.getString('alert.type')
+    },
+    // 辅助性文字
+    description: {
+        type: String,
+        default: defProps.getString('alert.description')
+    },
+    // 是否可关闭
+    closable: {
+        type: Boolean,
+        default: defProps.getBoolean('alert.closable')
+    },
+    // 是否显示图标
+    showIcon: {
+        type: Boolean,
+        default: defProps.getBoolean('alert.showIcon')
+    },
+    // 浅或深色调，light-浅色，dark-深色
+    effect: {
+        type: String,
+        default: defProps.getString('alert.effect')
+    },
+    // 文字是否居中
+    center: {
+        type: Boolean,
+        default: defProps.getBoolean('alert.center')
+    },
+    // 字体大小
+    fontSize: {
+        type: [String, Number],
+        default: defProps.getNumber('alert.fontSize')
+    },
+    // 自定义样式
+    customStyle: {
+        type: Object,
+        default: () => ({})
+    },
+    // 标题文字
+    title: {
+        type: String,
+        default: defProps.getString('alert.title', '')
+    }
+});
+
+// 定义事件
+const emit = defineEmits(['click']);
+
+// 响应式数据
+const show = ref(true);
+
+// 计算属性
+const style1 = computed(() => {
+    return {
+        fontSize: addUnit(props.fontSize),
+        textAlign: props.center ? 'center' : 'left'
+    }
+});
+
+const iconColor = computed(() => {
+    return props.effect == 'light' ? props.type : '#ffffff'
+});
+
+// 不同主题对应不同的图标
+const iconName = computed(() => {
+    switch (props.type) {
+        case 'success':
+            return 'checkmark-circle-fill';
+        case 'error':
+            return 'close-circle-fill';
+        case 'warning':
+            return 'error-circle-fill';
+        case 'info':
+            return 'info-circle-fill';
+        case 'primary':
+            return 'more-circle-fill';
+        default: 
+            return 'error-circle-fill';
+    }
+});
+
+// 方法
+const addUnitFunc = (val: any) => {
+    return addUnit(val)
+};
+
+const addStyleFunc = (val: any) => {
+    return addStyle(val)
+};
+
+// 点击内容
+const clickHandler = () => {
+    emit('click')
+};
+
+// 点击关闭按钮
+const closeHandler = () => {
+    show.value = false
+};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-alert {
+		position: relative;
+		background-color: $up-primary;
+		padding: 8px 10px;
+		@include flex(row);
+		align-items: center;
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
+		border-bottom-left-radius: 4px;
+		border-bottom-right-radius: 4px;
+
+		&--primary--dark {
+			background-color: $up-primary;
+		}
+
+		&--primary--light {
+			background-color: #ecf5ff;
+		}
+
+		&--error--dark {
+			background-color: $up-error;
+		}
+
+		&--error--light {
+			background-color: #FEF0F0;
+		}
+
+		&--success--dark {
+			background-color: $up-success;
+		}
+
+		&--success--light {
+			background-color: #f5fff0;
+		}
+
+		&--warning--dark {
+			background-color: $up-warning;
+		}
+
+		&--warning--light {
+			background-color: #FDF6EC;
+		}
+
+		&--info--dark {
+			background-color: $up-info;
+		}
+
+		&--info--light {
+			background-color: #f4f4f5;
+		}
+
+		&__icon {
+			margin-right: 5px;
+		}
+
+		&__content {
+			@include flex(column);
+			flex: 1;
+
+			&__title {
+				color: $up-main-color;
+				font-size: 14px;
+				font-weight: bold;
+				color: #fff;
+				margin-bottom: 2px;
+			}
+
+			&__desc {
+				color: $up-main-color;
+				font-size: 14px;
+				flex-wrap: wrap;
+				color: #fff;
+			}
+		}
+
+		&__title--dark,
+		&__desc--dark {
+			color: #FFFFFF;
+		}
+
+		&__text--primary--light,
+		&__text--primary--light {
+			color: $up-primary;
+		}
+
+		&__text--success--light,
+		&__text--success--light {
+			color: $up-success;
+		}
+
+		&__text--warning--light,
+		&__text--warning--light {
+			color: $up-warning;
+		}
+
+		&__text--error--light,
+		&__text--error--light {
+			color: $up-error;
+		}
+
+		&__text--info--light,
+		&__text--info--light {
+			color: $up-info;
+		}
+
+		&__close {
+			position: absolute;
+			top: 11px;
+			right: 10px;
+		}
+	}
+</style>