uview-pro 0.0.1

package/components/u-back-top/u-back-top.vue

@@ -0,0 +1,156 @@
+<template>
+    <view
+        @tap="backToTop"
+        class="u-back-top"
+        :class="['u-back-top--mode--' + mode]"
+        :style="[
+            {
+                bottom: bottom + 'rpx',
+                right: right + 'rpx',
+                borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
+                zIndex: uZIndex,
+                opacity: opacity
+            },
+            customStyle
+        ]"
+    >
+        <view class="u-back-top__content" v-if="!slots.default">
+            <u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
+            <view class="u-back-top__content__tips">
+                {{ tips }}
+            </view>
+        </view>
+        <slot v-else />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, useSlots } from 'vue';
+
+defineOptions({
+    name: 'u-back-top'
+});
+
+/**
+ * back-top 返回顶部按钮
+ * @description 页面滚动时显示的返回顶部按钮
+ * @property {String} mode 返回顶部的形状，circle-圆形，square-方形
+ * @property {String} icon 自定义图标
+ * @property {String} tips 提示文字
+ * @property {Number|String} duration 返回顶部滚动时间
+ * @property {Number|String} scrollTop 滚动距离
+ * @property {Number|String} top 距离顶部多少距离显示，单位rpx
+ * @property {Number|String} bottom 返回顶部按钮到底部的距离，单位rpx
+ * @property {Number|String} right 返回顶部按钮到右边的距离，单位rpx
+ * @property {Number|String} zIndex 层级
+ * @property {Object} iconStyle 图标的样式，对象形式
+ * @property {Object} customStyle 整个组件的样式
+ */
+const props = defineProps({
+    /** 返回顶部的形状，circle-圆形，square-方形 */
+    mode: { type: String, default: 'circle' },
+    /** 自定义图标 */
+    icon: { type: String, default: 'arrow-upward' },
+    /** 提示文字 */
+    tips: { type: String, default: '' },
+    /** 返回顶部滚动时间 */
+    duration: { type: [Number, String], default: 100 },
+    /** 滚动距离 */
+    scrollTop: { type: [Number, String], default: 0 },
+    /** 距离顶部多少距离显示，单位rpx */
+    top: { type: [Number, String], default: 400 },
+    /** 返回顶部按钮到底部的距离，单位rpx */
+    bottom: { type: [Number, String], default: 200 },
+    /** 返回顶部按钮到右边的距离，单位rpx */
+    right: { type: [Number, String], default: 40 },
+    /** 层级 */
+    zIndex: { type: [Number, String], default: '9' },
+    /** 图标的样式，对象形式 */
+    iconStyle: {
+        type: Object,
+        default: () => ({
+            color: '#909399',
+            fontSize: '38rpx'
+        })
+    },
+    /** 整个组件的样式 */
+    customStyle: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const slots = useSlots();
+
+// 不透明度，为了让组件有一个显示和隐藏的过渡动画
+const opacity = ref(0);
+// 组件的z-index值，隐藏时设置为-1，就会看不到
+const uZIndex = ref(-1);
+
+/**
+ * 计算是否显示返回顶部按钮
+ * 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
+ * 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
+ */
+const showBackTop = computed(() => {
+    // uni.upx2px 用于将 rpx 转为 px
+    return Number(props.scrollTop) > (typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.top)) : Number(props.top));
+    // #else
+    // return Number(props.scrollTop) > Number(props.top)
+});
+
+// 监听组件的显示与隐藏状态，修改组件的层级和不透明度
+// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
+watch(showBackTop, nVal => {
+    if (nVal) {
+        uZIndex.value = Number(props.zIndex);
+        opacity.value = 1;
+    } else {
+        uZIndex.value = -1;
+        opacity.value = 0;
+    }
+});
+
+/**
+ * 返回顶部方法
+ */
+function backToTop() {
+    // uni.pageScrollTo 用于页面滚动到顶部
+    if (typeof uni !== 'undefined' && uni.pageScrollTo) {
+        uni.pageScrollTo({
+            scrollTop: 0,
+            duration: Number(props.duration)
+        });
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-back-top {
+    width: 80rpx;
+    height: 80rpx;
+    position: fixed;
+    z-index: 9;
+    @include vue-flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: #e1e1e1;
+    color: $u-content-color;
+    align-items: center;
+    transition: opacity 0.4s;
+
+    &__content {
+        @include vue-flex;
+        flex-direction: column;
+        align-items: center;
+
+        &__tips {
+            font-size: 24rpx;
+            transform: scale(0.8);
+            line-height: 1;
+        }
+    }
+}
+</style>

package/components/u-badge/u-badge.vue

@@ -0,0 +1,189 @@
+<template>
+    <view
+        v-if="show"
+        class="u-badge"
+        :class="[isDot ? 'u-badge-dot' : '', size === 'mini' ? 'u-badge-mini' : '', type ? 'u-badge--bg--' + type : '']"
+        :style="[
+      {
+        top: (offset as number[])[0] + 'rpx',
+        right: (offset as number[])[1] + 'rpx',
+        fontSize: fontSize + 'rpx',
+        position: absolute ? 'absolute' : 'static',
+        color: color,
+        backgroundColor: bgColor
+      },
+      boxStyle
+    ]"
+    >
+        {{ showText }}
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+    name: 'u-badge'
+});
+
+/**
+ * badge 角标
+ * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+ * @tutorial https://www.uviewui.com/components/badge.html
+ * @property {String|Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
+ * @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
+ * @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
+ * @property {String|Number} overflow-count 展示封顶的数字值（默认99）
+ * @property {String} type 使用预设的背景颜色（默认error）
+ * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
+ * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
+ * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
+ * @property {String} color 字体颜色（默认#ffffff）
+ * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
+ * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
+ * @example <u-badge type="error" count="7"></u-badge>
+ */
+
+const props = defineProps({
+    /** 使用预设的背景颜色 primary,warning,success,error,info */
+    type: { type: String, default: 'error' },
+    /** Badge的尺寸，default, mini */
+    size: { type: String, default: 'default' },
+    /** 是否是圆点 */
+    isDot: { type: Boolean, default: false },
+    /** 显示的数值内容 */
+    count: { type: [Number, String], default: undefined },
+    /** 展示封顶的数字值 */
+    overflowCount: { type: Number, default: 99 },
+    /** 当数值为 0 时，是否展示 Badge */
+    showZero: { type: Boolean, default: false },
+    /** 位置偏移 [number, number] */
+    offset: { type: [Array, Object], default: () => [20, 20] },
+    /** 是否开启绝对定位，开启了offset才会起作用 */
+    absolute: { type: Boolean, default: true },
+    /** 字体大小 */
+    fontSize: { type: [String, Number], default: '24' },
+    /** 字体颜色 */
+    color: { type: String, default: '#ffffff' },
+    /** badge的背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效 */
+    isCenter: { type: Boolean, default: false }
+});
+
+/**
+ * 计算 badge 的定位和变换样式
+ */
+const boxStyle = computed(() => {
+    let style: Record<string, any> = {};
+    if (props.isCenter) {
+        style.top = 0;
+        style.right = 0;
+        // Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
+        style.transform = 'translateY(-50%) translateX(50%)';
+    } else {
+        style.top = (props.offset as number[])[0] + 'rpx';
+        style.right = (props.offset as number[])[1] + 'rpx';
+        style.transform = 'translateY(0) translateX(0)';
+    }
+    // 如果尺寸为mini，后接上scale()
+    if (props.size === 'mini') {
+        style.transform = style.transform + ' scale(0.8)';
+    }
+    return style;
+});
+
+/**
+ * 计算显示的文本内容
+ */
+const showText = computed(() => {
+    if (props.isDot) return '';
+    else {
+        if (Number(props.count) > props.overflowCount) return `${props.overflowCount}+`;
+        else return props.count;
+    }
+});
+
+/**
+ * 是否显示组件
+ */
+const show = computed(() => {
+    // 如果count的值为0，并且showZero设置为false，不显示组件
+    if (Number(props.count) === 0 && props.showZero === false) return false;
+    else return true;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-badge {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    justify-content: center;
+    align-items: center;
+    line-height: 24rpx;
+    padding: 4rpx 8rpx;
+    border-radius: 100rpx;
+    z-index: 9;
+
+    &--bg--primary {
+        background-color: $u-type-primary;
+    }
+    &--bg--error {
+        background-color: $u-type-error;
+    }
+    &--bg--success {
+        background-color: $u-type-success;
+    }
+    &--bg--info {
+        background-color: $u-type-info;
+    }
+    &--bg--warning {
+        background-color: $u-type-warning;
+    }
+}
+
+.u-badge-dot {
+    height: 16rpx;
+    width: 16rpx;
+    border-radius: 100rpx;
+    line-height: 1;
+}
+
+.u-badge-mini {
+    transform: scale(0.8);
+    transform-origin: center center;
+}
+
+// .u-primary {
+// 	background: $u-type-primary;
+// 	color: #fff;
+// }
+
+// .u-error {
+// 	background: $u-type-error;
+// 	color: #fff;
+// }
+
+// .u-warning {
+// 	background: $u-type-warning;
+// 	color: #fff;
+// }
+
+// .u-success {
+// 	background: $u-type-success;
+// 	color: #fff;
+// }
+
+// .u-black {
+// 	background: #585858;
+// 	color: #fff;
+// }
+
+.u-info {
+    background-color: $u-type-info;
+    color: #fff;
+}
+</style>