uview-pro 0.0.1

package/changelog.md

@@ -0,0 +1,6 @@
+## 0.0.1（2025-08-04）
+
+-   兼容安卓，iOS，微信小程序，H5 等
+-   使用 Vue3 已重构 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+-   详尽的文档支持，现代化的演示效果
+-   按需引入，精简打包体积

package/components/u-action-sheet/u-action-sheet.vue

@@ -0,0 +1,205 @@
+<template>
+    <u-popup
+        mode="bottom"
+        :border-radius="borderRadius"
+        :popup="false"
+        v-model="popupValue"
+        :maskCloseAble="maskCloseAble"
+        length="auto"
+        :safeAreaInsetBottom="safeAreaInsetBottom"
+        @close="popupClose"
+        :z-index="uZIndex"
+    >
+        <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
+            {{ tips.text }}
+        </view>
+        <block v-for="(item, index) in list" :key="index">
+            <view
+                @touchmove.stop.prevent
+                @tap="itemClick(index)"
+                :style="[itemStyle(index)]"
+                class="u-action-sheet-item u-line-1"
+                :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
+                :hover-stay-time="150"
+            >
+                <text>{{ item.text }}</text>
+                <text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{ item.subText }}</text>
+            </view>
+        </block>
+        <view class="u-gab" v-if="cancelBtn"> </view>
+        <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class" :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{
+            cancelText
+        }}</view>
+    </u-popup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-action-sheet'
+});
+
+/**
+ * actionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ * @tutorial https://www.uviewui.com/components/actionSheet.html
+ * @property {Array<Object>} list 按钮的文字数组，见官方文档示例
+ * @property {Object} tips 顶部的提示文字，见官方文档示例
+ * @property {String} cancel-text 取消按钮的提示文字
+ * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
+ * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
+ * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Number String} z-index z-index值（默认1075）
+ * @property {String} cancel-text 取消按钮的提示文字
+ * @event {Function} click 点击ActionSheet列表项时触发
+ * @event {Function} close 点击取消按钮时触发
+ * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
+ */
+
+const props = defineProps({
+    /** 点击遮罩是否可以关闭actionsheet */
+    maskCloseAble: {
+        type: Boolean,
+        default: true
+    },
+    /** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */
+    list: {
+        type: Array as () => Array<any>,
+        default: () => []
+    },
+    /** 顶部的提示文字 */
+    tips: {
+        type: Object as () => { text: string; color?: string; fontSize?: string },
+        default: () => ({ text: '', color: '', fontSize: '26' })
+    },
+    /** 底部的取消按钮 */
+    cancelBtn: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
+    safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+    },
+    /** 通过双向绑定控制组件的弹出与收起 */
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    /** 弹出的顶部圆角值 */
+    borderRadius: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 弹出的z-index值 */
+    zIndex: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 取消按钮的文字提示 */
+    cancelText: {
+        type: String,
+        default: '取消'
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'click', 'close']);
+
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: (val: boolean) => emit('update:modelValue', val)
+});
+
+// 顶部提示的样式
+const tipsStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (props.tips.color) style.color = props.tips.color;
+    if (props.tips.fontSize) style.fontSize = props.tips.fontSize + 'rpx';
+    return style;
+});
+
+// 操作项目的样式
+const itemStyle = (index: number) => {
+    let style: Record<string, string> = {};
+    if (props.list[index]?.color) style.color = props.list[index].color;
+    if (props.list[index]?.fontSize) style.fontSize = props.list[index].fontSize + 'rpx';
+    // 选项被禁用的样式
+    if (props.list[index]?.disabled) style.color = '#c0c4cc';
+    return style;
+};
+
+// 计算z-index
+const uZIndex = computed(() => {
+    // 如果用户有传递z-index值，优先使用
+    return props.zIndex ? props.zIndex : $u.zIndex.popup;
+});
+
+/**
+ * 点击取消按钮
+ */
+function close() {
+    // 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
+    // 这是一个vue发送事件的特殊用法
+    popupClose();
+    emit('close');
+}
+
+/**
+ * 弹窗关闭
+ */
+function popupClose() {
+    emit('update:modelValue', false);
+}
+
+/**
+ * 点击某一个item
+ * @param index 选项索引
+ */
+function itemClick(index: number) {
+    // disabled的项禁止点击
+    if (props.list[index]?.disabled) return;
+    emit('click', index);
+    emit('update:modelValue', false);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-tips {
+    font-size: 26rpx;
+    text-align: center;
+    padding: 34rpx 0;
+    line-height: 1;
+    color: $u-tips-color;
+}
+
+.u-action-sheet-item {
+    @include vue-flex;
+    line-height: 1;
+    justify-content: center;
+    align-items: center;
+    font-size: 32rpx;
+    padding: 34rpx 0;
+    flex-direction: column;
+}
+
+.u-action-sheet-item__subtext {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    margin-top: 20rpx;
+}
+
+.u-gab {
+    height: 12rpx;
+    background-color: rgb(234, 234, 236);
+}
+
+.u-actionsheet-cancel {
+    color: $u-main-color;
+}
+</style>

package/components/u-alert-tips/u-alert-tips.vue

@@ -0,0 +1,241 @@
+<template>
+    <view
+        class="u-alert-tips"
+        v-if="show"
+        :class="[!show ? 'u-close-alert-tips' : '', type ? 'u-alert-tips--bg--' + type + '-light' : '', type ? 'u-alert-tips--border--' + type + '-disabled' : '']"
+        :style="{
+            backgroundColor: bgColor,
+            borderColor: borderColor
+        }"
+    >
+        <view class="u-icon-wrap">
+            <u-icon v-if="showIcon" :name="uIconName" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
+        </view>
+        <view class="u-alert-content" @tap.stop="onClick">
+            <view class="u-alert-title" :style="uTitleStyle">
+                {{ title }}
+            </view>
+            <view v-if="description" class="u-alert-desc" :style="descStyle">
+                {{ description }}
+            </view>
+        </view>
+        <view class="u-icon-wrap">
+            <u-icon
+                @click="onClose"
+                v-if="closeAble && !closeText"
+                hoverClass="u-type-error-hover-color"
+                name="close"
+                color="#c0c4cc"
+                :size="22"
+                class="u-close-icon"
+                :style="{
+                    top: description ? '18rpx' : '24rpx'
+                }"
+            ></u-icon>
+        </view>
+        <text
+            v-if="closeAble && closeText"
+            class="u-close-text"
+            :style="{
+                top: description ? '18rpx' : '24rpx'
+            }"
+            >{{ closeText }}</text
+        >
+    </view>
+</template>
+
+<script setup lang="ts">
+import uIcon from '../u-icon/u-icon.vue';
+import { computed } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-alert-tips'
+});
+
+/**
+ * alertTips 警告提示
+ * @description 警告提示，展现需要关注的信息
+ * @tutorial https://uviewui.com/components/alertTips.html
+ * @property {String} title 显示的标题文字
+ * @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
+ * @property {String} type 关闭按钮(默认为叉号icon图标)
+ * @property {String} icon 图标名称
+ * @property {Object} icon-style 图标的样式，对象形式
+ * @property {Object} title-style 标题的样式，对象形式
+ * @property {Object} desc-style 描述的样式，对象形式
+ * @property {String} close-able 用文字替代关闭图标，close-able为true时有效
+ * @property {Boolean} show-icon 是否显示左边的辅助图标
+ * @property {Boolean} show 显示或隐藏组件
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 点击关闭按钮时触发
+ */
+type Types = 'primary' | 'info' | 'error' | 'warning' | 'success';
+
+const props = defineProps({
+    /** 显示文字 */
+    title: { type: String, default: '' },
+    /** 主题，success/warning/info/error */
+    type: { type: String as () => Types, default: 'warning' },
+    /** 辅助性文字 */
+    description: { type: String, default: '' },
+    /** 是否可关闭 */
+    closeAble: { type: Boolean, default: false },
+    /** 关闭按钮自定义文本 */
+    closeText: { type: String, default: '' },
+    /** 是否显示图标 */
+    showIcon: { type: Boolean, default: false },
+    /** 文字颜色，如果定义了color值，icon会失效 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 边框颜色 */
+    borderColor: { type: String, default: '' },
+    /** 是否显示 */
+    show: { type: Boolean, default: true },
+    /** 左边显示的icon */
+    icon: { type: String, default: '' },
+    /** icon的样式 */
+    iconStyle: { type: Object, default: () => ({}) },
+    /** 标题的样式 */
+    titleStyle: { type: Object, default: () => ({}) },
+    /** 描述文字的样式 */
+    descStyle: { type: Object, default: () => ({}) }
+});
+
+const emit = defineEmits(['click', 'close']);
+
+/**
+ * 标题样式，合并加粗和用户自定义样式
+ */
+const uTitleStyle = computed(() => {
+    let style: Record<string, any> = {};
+    // 如果有描述文字的话，标题进行加粗
+    style.fontWeight = props.description ? 500 : 'normal';
+    // 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖
+    return $u.deepMerge(style, props.titleStyle);
+});
+
+/**
+ * 图标名称，优先使用用户传入，否则根据type主题推定默认图标
+ */
+const uIconName = computed(() => {
+    // 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标
+    return props.icon ? props.icon : $u.type2icon(props.type);
+});
+
+/**
+ * 图标类型，优先使用iconStyle，否则用type
+ */
+const uIconType = computed(() => {
+    // 如果有设置图标的样式，优先使用，没有的话，则用type的样式
+    return Object.keys(props.iconStyle).length ? '' : props.type;
+});
+
+/**
+ * 点击内容
+ */
+function onClick() {
+    emit('click');
+}
+
+/**
+ * 点击关闭按钮
+ */
+function onClose() {
+    emit('close');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-alert-tips {
+    @include vue-flex;
+    align-items: center;
+    padding: 16rpx 30rpx;
+    border-radius: 8rpx;
+    position: relative;
+    transition: all 0.3s linear;
+    border: 1px solid #fff;
+
+    &--bg--primary-light {
+        background-color: $u-type-primary-light;
+    }
+
+    &--bg--info-light {
+        background-color: $u-type-info-light;
+    }
+
+    &--bg--success-light {
+        background-color: $u-type-success-light;
+    }
+
+    &--bg--warning-light {
+        background-color: $u-type-warning-light;
+    }
+
+    &--bg--error-light {
+        background-color: $u-type-error-light;
+    }
+
+    &--border--primary-disabled {
+        border-color: $u-type-primary-disabled;
+    }
+
+    &--border--success-disabled {
+        border-color: $u-type-success-disabled;
+    }
+
+    &--border--error-disabled {
+        border-color: $u-type-error-disabled;
+    }
+
+    &--border--warning-disabled {
+        border-color: $u-type-warning-disabled;
+    }
+
+    &--border--info-disabled {
+        border-color: $u-type-info-disabled;
+    }
+}
+
+.u-close-alert-tips {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.u-icon {
+    margin-right: 16rpx;
+}
+
+.u-alert-title {
+    font-size: 28rpx;
+    color: $u-main-color;
+}
+
+.u-alert-desc {
+    font-size: 26rpx;
+    text-align: left;
+    color: $u-content-color;
+}
+
+.u-close-icon {
+    position: absolute;
+    top: 20rpx;
+    right: 20rpx;
+}
+
+.u-close-hover {
+    color: red;
+}
+
+.u-close-text {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    position: absolute;
+    top: 20rpx;
+    right: 20rpx;
+    line-height: 1;
+}
+</style>

package/components/u-avatar/u-avatar.vue

@@ -0,0 +1,220 @@
+<template>
+    <view class="u-avatar" :style="wrapStyle" @tap="onClick">
+        <image @error="onLoadError" :style="imgStyle" class="u-avatar__img" v-if="!uText && avatar" :src="avatar" :mode="imgMode"></image>
+        <text class="u-line-1" v-else-if="uText" :style="{ fontSize: '38rpx' }">{{ uText }}</text>
+        <slot v-else></slot>
+        <view class="u-avatar__sex" v-if="showSex" :class="['u-avatar__sex--' + sexIcon]" :style="uSexStyle">
+            <u-icon :name="sexIcon" size="20"></u-icon>
+        </view>
+        <view class="u-avatar__level" v-if="showLevel" :style="uLevelStyle">
+            <u-icon :name="levelIcon" size="20"></u-icon>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+defineOptions({
+    name: 'u-avatar'
+});
+
+let base64Avatar =
+    'data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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';
+
+/**
+ * avatar 头像
+ * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+ * @tutorial https://www.uviewui.com/components/avatar.html
+ * @property {String} bg-color 背景颜色，一般显示文字时用（默认#ffffff）
+ * @property {String} src 头像路径，如加载失败，将会显示默认头像
+ * @property {String Number} size 头像尺寸，可以为指定字符串(large, default, mini)，或者数值，单位rpx（默认default）
+ * @property {String} mode 显示类型，见上方说明（默认circle）
+ * @property {String} sex-icon 性别图标，man-男，woman-女（默认man）
+ * @property {String} level-icon 等级图标（默认level）
+ * @property {String} sex-bg-color 性别图标背景颜色
+ * @property {String} level-bg-color 等级图标背景颜色
+ * @property {String} show-sex 是否显示性别图标（默认false）
+ * @property {String} show-level 是否显示等级图标（默认false）
+ * @property {String} img-mode 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值（默认aspectFill）
+ * @property {String} index 用户传递的标识符值，如果是列表循环，可穿v-for的index值
+ * @event {Function} click 头像被点击
+ * @example <u-avatar :src="src"></u-avatar>
+ */
+const props = defineProps({
+    /** 背景颜色 */
+    bgColor: { type: String, default: 'transparent' },
+    /** 头像路径 */
+    src: { type: String, default: '' },
+    /** 尺寸，large-大，default-中等，mini-小，如果为数值，则单位为rpx，宽度等于高度 */
+    size: { type: [String, Number], default: 'default' },
+    /** 头像模型，square-带圆角方形，circle-圆形 */
+    mode: { type: String, default: 'circle' },
+    /** 文字内容 */
+    text: { type: String, default: '' },
+    /** 图片的裁剪模型 */
+    imgMode: { type: String, default: 'aspectFill' },
+    /** 标识符 */
+    index: { type: [String, Number], default: '' },
+    /** 右上角性别角标，man-男，woman-女 */
+    sexIcon: { type: String, default: 'man' },
+    /** 右下角的等级图标 */
+    levelIcon: { type: String, default: 'level' },
+    /** 右下角等级图标背景颜色 */
+    levelBgColor: { type: String, default: '' },
+    /** 右上角性别图标的背景颜色 */
+    sexBgColor: { type: String, default: '' },
+    /** 是否显示性别图标 */
+    showSex: { type: Boolean, default: false },
+    /** 是否显示等级图标 */
+    showLevel: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['click']);
+
+// 头像的地址，因为如果加载错误，需要赋值为默认图片，props值无法修改，所以需要一个中间值
+const avatar = ref(props.src ? props.src : base64Avatar);
+const error = ref(false);
+
+// 用户可能会在头像加载失败时，再次修改头像值，所以需要重新赋值
+watch(
+    () => props.src,
+    n => {
+        if (!n) {
+            // 如果传入null或者''，或者undefined，显示默认头像
+            avatar.value = base64Avatar;
+            error.value = true;
+        } else {
+            avatar.value = n;
+            error.value = false;
+        }
+    }
+);
+
+/**
+ * 头像外层样式
+ */
+const wrapStyle = computed(() => {
+    let style: Record<string, string> = {};
+    style.height = props.size === 'large' ? '120rpx' : props.size === 'default' ? '90rpx' : props.size === 'mini' ? '70rpx' : props.size + 'rpx';
+    style.width = style.height;
+    style.flex = `0 0 ${style.height}`;
+    style.backgroundColor = props.bgColor;
+    style.borderRadius = props.mode === 'circle' ? '500px' : '5px';
+    if (props.text) style.padding = '0 6rpx';
+    return style;
+});
+
+/**
+ * 图片样式
+ */
+const imgStyle = computed(() => {
+    let style: Record<string, string> = {};
+    style.borderRadius = props.mode === 'circle' ? '500px' : '5px';
+    return style;
+});
+
+/**
+ * 取字符串的第一个字符
+ */
+const uText = computed(() => {
+    return String(props.text)[0];
+});
+
+/**
+ * 性别图标的自定义样式
+ */
+const uSexStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (props.sexBgColor) style.backgroundColor = props.sexBgColor;
+    return style;
+});
+
+/**
+ * 等级图标的自定义样式
+ */
+const uLevelStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (props.levelBgColor) style.backgroundColor = props.levelBgColor;
+    return style;
+});
+
+/**
+ * 图片加载错误时，显示默认头像
+ */
+function onLoadError() {
+    error.value = true;
+    avatar.value = base64Avatar;
+}
+
+/**
+ * 头像被点击
+ */
+function onClick() {
+    emit('click', props.index);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-avatar {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: $u-content-color;
+    border-radius: 10px;
+    position: relative;
+
+    &__img {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__sex {
+        position: absolute;
+        width: 32rpx;
+        color: #ffffff;
+        height: 32rpx;
+        @include vue-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100rpx;
+        top: 5%;
+        z-index: 1;
+        right: -7%;
+        border: 1px #ffffff solid;
+
+        &--man {
+            background-color: $u-type-primary;
+        }
+
+        &--woman {
+            background-color: $u-type-error;
+        }
+
+        &--none {
+            background-color: $u-type-warning;
+        }
+    }
+
+    &__level {
+        position: absolute;
+        width: 32rpx;
+        color: #ffffff;
+        height: 32rpx;
+        @include vue-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100rpx;
+        bottom: 5%;
+        z-index: 1;
+        right: -7%;
+        border: 1px #ffffff solid;
+        background-color: $u-type-warning;
+    }
+}
+</style>