uview-pro 0.0.1

package/components/u-popup/u-popup.vue

@@ -0,0 +1,404 @@
+<template>
+    <view v-if="visibleSync" :style="[customStyle, { zIndex: Number(uZindex) - 1 }]" class="u-drawer" hover-stop-propagation>
+        <u-mask
+            :duration="duration"
+            :custom-style="maskCustomStyle"
+            :maskClickAble="maskCloseAble"
+            :z-index="Number(uZindex) - 2"
+            :show="showDrawer && mask"
+            @click="maskClick"
+        ></u-mask>
+        <view
+            class="u-drawer-content"
+            @tap="modeCenterClose(mode)"
+            :class="[
+                safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
+                'u-drawer-' + mode,
+                showDrawer ? 'u-drawer-content-visible' : '',
+                zoom && mode == 'center' ? 'u-animation-zoom' : ''
+            ]"
+            @touchmove.stop.prevent
+            @tap.stop.prevent
+            :style="[style]"
+        >
+            <view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]">
+                <u-icon
+                    @click="close"
+                    v-if="closeable"
+                    class="u-close"
+                    :class="['u-close--' + closeIconPos]"
+                    :name="closeIcon"
+                    :color="closeIconColor"
+                    :size="closeIconSize"
+                ></u-icon>
+                <scroll-view class="u-drawer__scroll-view" scroll-y="true">
+                    <slot />
+                </scroll-view>
+            </view>
+            <scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else>
+                <slot />
+            </scroll-view>
+            <view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]">
+                <u-icon v-if="mode != 'center' && closeable" :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-popup'
+});
+
+/**
+ * popup 弹窗
+ * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
+ * @tutorial https://www.uviewui.com/components/popup.html
+ * @property {String} mode 弹出方向（默认left）
+ * @property {Boolean} mask 是否显示遮罩（默认true）
+ * @property {Stringr | Number} length mode=left | 见官网说明（默认auto）
+ * @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
+ * @property {Object} custom-style 用户自定义样式
+ * @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值
+ * @property {Numberr | String} border-radius 弹窗圆角值（默认0）
+ * @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
+ * @property {Boolean} closeable 是否显示关闭图标（默认false）
+ * @property {String} close-icon 关闭图标的名称，只能uView的内置图标
+ * @property {String} close-icon-pos 自定义关闭图标位置（默认top-right）
+ * @property {String} close-icon-color 关闭图标的颜色（默认#909399）
+ * @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30）
+ * @event {Function} open 弹出层打开
+ * @event {Function} close 弹出层收起
+ * @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
+ */
+
+const props = defineProps({
+    // 显示状态
+    show: { type: Boolean, default: false },
+    // 弹出方向，left|right|top|bottom|center
+    mode: { type: String, default: 'left' },
+    // 是否显示遮罩
+    mask: { type: Boolean, default: true },
+    // 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
+    // 或者百分比"50%"，表示由内容撑开高度或者宽度
+    length: { type: [Number, String], default: 'auto' },
+    // 是否开启缩放动画，只在mode=center时有效
+    zoom: { type: Boolean, default: true },
+    // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    // 是否可以通过点击遮罩进行关闭
+    maskCloseAble: { type: Boolean, default: true },
+    // 用户自定义样式
+    customStyle: { type: Object, default: () => ({}) },
+    modelValue: { type: Boolean, default: false },
+    // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
+    // 对v-model双向绑定多层调用造成报错不能修改props值的问题
+    popup: { type: Boolean, default: true },
+    borderRadius: { type: [Number, String], default: 0 },
+    zIndex: { type: [Number, String], default: '' },
+    // 是否显示关闭图标
+    closeable: { type: Boolean, default: false },
+    // 关闭图标的名称，只能uView的内置图标
+    closeIcon: { type: String, default: 'close' },
+    // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
+    closeIconPos: { type: String, default: 'top-right' },
+    // 关闭图标的颜色
+    closeIconColor: { type: String, default: '#909399' },
+    // 关闭图标的大小，单位rpx
+    closeIconSize: { type: [String, Number], default: '30' },
+    // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
+    // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+    width: { type: String, default: '' },
+    // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
+    // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+    height: { type: String, default: '' },
+    // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
+    negativeTop: { type: [String, Number], default: 0 },
+    // 遮罩的样式，一般用于修改遮罩的透明度
+    maskCustomStyle: { type: Object, default: () => ({}) },
+    // 遮罩打开或收起的动画过渡时间，单位ms
+    duration: { type: [String, Number], default: 250 }
+});
+const emit = defineEmits(['update:modelValue', 'open', 'close']);
+
+// 组件内部状态
+const visibleSync = ref(false);
+const showDrawer = ref(false);
+const timer = ref<ReturnType<typeof setTimeout> | null>(null);
+const closeFromInner = ref(false); // value的值改变，是发生在内部还是外部
+// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
+const style = computed(() => {
+    let style: Record<string, any> = {};
+    // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
+    if (props.mode == 'left' || props.mode == 'right') {
+        style = {
+            width: props.width ? getUnitValue(props.width) : getUnitValue(props.length),
+            height: '100%',
+            transform: `translate3D(${props.mode == 'left' ? '-100%' : '100%'},0px,0px)`
+        };
+    } else if (props.mode == 'top' || props.mode == 'bottom') {
+        style = {
+            width: '100%',
+            height: props.height ? getUnitValue(props.height) : getUnitValue(props.length),
+            transform: `translate3D(0px,${props.mode == 'top' ? '-100%' : '100%'},0px)`
+        };
+    }
+    // 如果用户设置了borderRadius值，添加弹窗的圆角
+    style.zIndex = uZindex.value;
+    if (props.borderRadius) {
+        switch (props.mode) {
+            case 'left':
+                style.borderRadius = `0 ${props.borderRadius}rpx ${props.borderRadius}rpx 0`;
+                break;
+            case 'top':
+                style.borderRadius = `0 0 ${props.borderRadius}rpx ${props.borderRadius}rpx`;
+                break;
+            case 'right':
+                style.borderRadius = `${props.borderRadius}rpx 0 0 ${props.borderRadius}rpx`;
+                break;
+            case 'bottom':
+                style.borderRadius = `${props.borderRadius}rpx ${props.borderRadius}rpx 0 0`;
+                break;
+            default:
+        }
+        // 不加可能圆角无效
+        style.overflow = 'hidden';
+    }
+    if (props.duration) style.transition = `all ${Number(props.duration) / 1000}s linear`;
+    return style;
+});
+
+// 中部弹窗的特有样式
+const centerStyle = computed(() => {
+    let style: Record<string, any> = {};
+    style.width = props.width ? getUnitValue(props.width) : getUnitValue(props.length);
+
+    // 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度
+    style.height = props.height ? getUnitValue(props.height) : 'auto';
+    style.zIndex = uZindex.value;
+    style.marginTop = `-${$u.addUnit(props.negativeTop)}`;
+    if (props.borderRadius) {
+        style.borderRadius = `${props.borderRadius}rpx`;
+        // 不加可能圆角无效
+        style.overflow = 'hidden';
+    }
+    return style;
+});
+
+// 计算整理后的z-index值
+const uZindex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.popup));
+
+watch(
+    () => props.modelValue,
+    val => {
+        if (val) {
+            open();
+        } else if (!closeFromInner.value) {
+            close();
+        }
+        closeFromInner.value = false;
+    }
+);
+
+onMounted(() => {
+    if (props.modelValue) open();
+});
+
+/**
+ * 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
+ */
+function getUnitValue(val: string | number) {
+    if (/(%|px|rpx|auto)$/.test(String(val))) return val;
+    else return val + 'rpx';
+}
+
+/**
+ * 遮罩被点击
+ */
+function maskClick() {
+    close();
+}
+
+/**
+ * 关闭弹窗
+ */
+function close() {
+    // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
+    // 造成@close事件触发两次
+    closeFromInner.value = true;
+    change('showDrawer', 'visibleSync', false);
+}
+
+/**
+ * 中部弹出时，点击内容区域关闭弹窗
+ */
+function modeCenterClose(mode: string) {
+    // 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
+    // 让其只在mode=center时起作用
+    if (mode != 'center' || !props.maskCloseAble) return;
+    close();
+}
+
+/**
+ * 打开弹窗
+ */
+function open() {
+    change('visibleSync', 'showDrawer', true);
+}
+
+/**
+ * 控制弹窗显示/隐藏的动画和状态
+ * 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+ * 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+ */
+function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 'showDrawer', status: boolean) {
+    // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
+    if (props.popup === true) {
+        emit('update:modelValue', status);
+    }
+    (param1 === 'showDrawer' ? showDrawer : visibleSync).value = status;
+    if (status) {
+        // #ifdef H5 || MP
+        timer.value = setTimeout(() => {
+            (param2 === 'showDrawer' ? showDrawer : visibleSync).value = status;
+            emit(status ? 'open' : 'close');
+        }, 50);
+        // #endif
+        // #ifndef H5 || MP
+        nextTick(() => {
+            (param2 === 'showDrawer' ? showDrawer : visibleSync).value = status;
+            emit(status ? 'open' : 'close');
+        });
+        // #endif
+    } else {
+        timer.value = setTimeout(() => {
+            (param2 === 'showDrawer' ? showDrawer : visibleSync).value = status;
+            emit(status ? 'open' : 'close');
+        }, Number(props.duration));
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-drawer {
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+}
+
+.u-drawer-content {
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+    position: absolute;
+    z-index: 1003;
+    transition: all 0.25s linear;
+}
+
+.u-drawer__scroll-view {
+    width: 100%;
+    height: 100%;
+}
+
+.u-drawer-left {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #ffffff;
+}
+
+.u-drawer-right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #ffffff;
+}
+
+.u-drawer-top {
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #ffffff;
+}
+
+.u-drawer-bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #ffffff;
+}
+
+.u-drawer-center {
+    @include vue-flex;
+    flex-direction: column;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    z-index: 99999;
+}
+
+.u-mode-center-box {
+    min-width: 100rpx;
+    min-height: 100rpx;
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+    position: relative;
+    background-color: #ffffff;
+}
+
+.u-drawer-content-visible.u-drawer-center {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.u-animation-zoom {
+    transform: scale(1.15);
+}
+
+.u-drawer-content-visible {
+    transform: translate3D(0px, 0px, 0px) !important;
+}
+
+.u-close {
+    position: absolute;
+    z-index: 3;
+}
+
+.u-close--top-left {
+    top: 30rpx;
+    left: 30rpx;
+}
+
+.u-close--top-right {
+    top: 30rpx;
+    right: 30rpx;
+}
+
+.u-close--bottom-left {
+    bottom: 30rpx;
+    left: 30rpx;
+}
+
+.u-close--bottom-right {
+    right: 30rpx;
+    bottom: 30rpx;
+}
+</style>

package/components/u-radio/u-radio.vue

@@ -0,0 +1,272 @@
+<template>
+    <view class="u-radio" :style="[radioStyle]">
+        <view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
+            <u-icon class="u-radio__icon-wrap__icon" name="checkbox-mark" :size="elIconSize" :color="iconColor" />
+        </view>
+        <view
+            class="u-radio__label"
+            @tap="onClickLabel"
+            :style="{
+                fontSize: $u.addUnit(labelSize)
+            }"
+        >
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-radio'
+});
+
+/**
+ * radio 单选框
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
+ * @tutorial https://www.uviewui.com/components/radio.html
+ * @property {String|Number} icon-size 图标大小，单位rpx（默认24）
+ * @property {String|Number} label-size label字体大小，单位rpx（默认28）
+ * @property {String|Number} name radio组件的标示符
+ * @property {String} shape 形状，见上方说明（默认circle）
+ * @property {Boolean} disabled 是否禁用（默认false）
+ * @property {Boolean} label-disabled 点击文本是否可以操作radio（默认true）
+ * @property {String} active-color 选中时的颜色，如设置parent的active-color将失效
+ * @event {Function} change 某个radio状态发生变化时触发(选中状态)
+ * @example <u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio>
+ */
+
+const props = defineProps({
+    /** radio的名称 */
+    name: { type: [String, Number], default: '' },
+    /** 形状，square为方形，circle为原型 */
+    shape: { type: String, default: '' },
+    /** 是否禁用 */
+    disabled: { type: [String, Boolean], default: '' },
+    /** 是否禁止点击提示语选中复选框 */
+    labelDisabled: { type: [String, Boolean], default: '' },
+    /** 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 */
+    activeColor: { type: String, default: '' },
+    /** 图标的大小，单位rpx */
+    iconSize: { type: [String, Number], default: '' },
+    /** label的字体大小，rpx单位 */
+    labelSize: { type: [String, Number], default: '' }
+});
+
+const emit = defineEmits(['change']);
+
+// 获取父组件u-radio-group的provide数据
+const parent = inject<any>('u-radio-group', null);
+
+// 父组件的默认值
+const parentData = computed(
+    () =>
+        parent?.getData?.() || {
+            iconSize: null,
+            labelDisabled: null,
+            disabled: null,
+            shape: null,
+            activeColor: null,
+            size: null,
+            width: null,
+            height: null,
+            value: null,
+            wrap: null
+        }
+);
+
+/**
+ * 是否禁用，如果父组件u-radio-group禁用的话，将会忽略子组件的配置
+ */
+const elDisabled = computed(() => (props.disabled !== '' ? props.disabled : parentData.value.disabled !== null ? parentData.value.disabled : false));
+
+/**
+ * 是否禁用label点击
+ */
+const elLabelDisabled = computed(() => (props.labelDisabled !== '' ? props.labelDisabled : parentData.value.labelDisabled !== null ? parentData.value.labelDisabled : false));
+
+/**
+ * 组件尺寸，对应size的值，默认值为34rpx
+ * 兼容无size属性场景
+ */
+const elSize = computed(() => {
+    // 若props无size，直接用默认值
+    // 兼容老代码，parentData.value.size 可能不存在
+    return (props as any).size ? (props as any).size : parentData.value.size ? parentData.value.size : 34;
+});
+
+/**
+ * 组件的勾选图标的尺寸，默认20
+ */
+const elIconSize = computed(() => (props.iconSize ? props.iconSize : parentData.value.iconSize ? parentData.value.iconSize : 20));
+
+/**
+ * 组件选中激活时的颜色
+ */
+const elActiveColor = computed(() => (props.activeColor ? props.activeColor : parentData.value.activeColor ? parentData.value.activeColor : 'primary'));
+
+/**
+ * 组件的形状
+ */
+const elShape = computed(() => (props.shape ? props.shape : parentData.value.shape ? parentData.value.shape : 'circle'));
+
+/**
+ * 设置radio的状态，要求radio的name等于parent的value时才为选中状态
+ */
+const iconStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (elActiveColor.value && parentData.value.value == props.name && !elDisabled.value) {
+        style.borderColor = elActiveColor.value;
+        style.backgroundColor = elActiveColor.value;
+    }
+    style.width = $u.addUnit(elSize.value);
+    style.height = $u.addUnit(elSize.value);
+    return style;
+});
+
+const iconColor = computed(() => (props.name == parentData.value.value ? '#ffffff' : 'transparent'));
+
+const iconClass = computed(() => {
+    let classes: string[] = [];
+    classes.push('u-radio__icon-wrap--' + elShape.value);
+    if (props.name == parentData.value.value) classes.push('u-radio__icon-wrap--checked');
+    if (elDisabled.value) classes.push('u-radio__icon-wrap--disabled');
+    if (props.name == parentData.value.value && elDisabled.value) classes.push('u-radio__icon-wrap--disabled--checked');
+    // 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+    return classes.join(' ');
+});
+
+const radioStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (parentData.value.width) {
+        style.width = $u.addUnit(parentData.value.width);
+        // #ifdef MP
+        // 各家小程序因为它们特殊的编译结构，使用float布局
+        style.float = 'left';
+        // #endif
+        // #ifndef MP
+        // H5和APP使用flex布局
+        style.flex = `0 0 ${$u.addUnit(parentData.value.width)}`;
+        // #endif
+    }
+    if (parentData.value.wrap) {
+        style.width = '100%';
+        // #ifndef MP
+        // H5和APP使用flex布局，将宽度设置100%，即可自动换行
+        style.flex = '0 0 100%';
+        // #endif
+    }
+    return style;
+});
+
+/**
+ * 点击label
+ */
+function onClickLabel() {
+    if (!elLabelDisabled.value && !elDisabled.value) {
+        setRadioCheckedStatus();
+    }
+}
+/**
+ * 点击icon
+ */
+function toggle() {
+    if (!elDisabled.value) {
+        setRadioCheckedStatus();
+    }
+}
+/**
+ * 发出事件
+ */
+function emitEvent() {
+    // u-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
+    if (parentData.value.value != props.name) emit('change', props.name);
+}
+/**
+ * 改变组件选中状态
+ * 这里的改变的依据是，更改本组件的parentData.value值为本组件的name值，同时通过父组件遍历所有u-radio实例
+ * 将本组件外的其他u-radio的parentData.value都设置为空(由computed计算后，都被取消选中状态)，因而只剩下一个为选中状态
+ */
+function setRadioCheckedStatus() {
+    emitEvent();
+    if (parent && parent.setValue) {
+        parent.setValue(props.name);
+        parentData.value.value = props.name;
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-radio {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1.8;
+
+    &__icon-wrap {
+        color: $u-content-color;
+        @include vue-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: 42rpx;
+        height: 42rpx;
+        color: transparent;
+        text-align: center;
+        transition-property: color, border-color, background-color;
+        font-size: 20px;
+        border: 1px solid #c8c9cc;
+        transition-duration: 0.2s;
+
+        /* #ifdef MP-TOUTIAO */
+        // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+        &__icon {
+            line-height: 0;
+        }
+        /* #endif */
+
+        &--circle {
+            border-radius: 100%;
+        }
+
+        &--square {
+            border-radius: 3px;
+        }
+
+        &--checked {
+            color: #fff;
+            background-color: #2979ff;
+            border-color: #2979ff;
+        }
+
+        &--disabled {
+            background-color: #ebedf0;
+            border-color: #c8c9cc;
+        }
+
+        &--disabled--checked {
+            color: #c8c9cc !important;
+        }
+    }
+
+    &__label {
+        word-wrap: break-word;
+        margin-left: 10rpx;
+        margin-right: 24rpx;
+        color: $u-content-color;
+        font-size: 30rpx;
+
+        &--disabled {
+            color: #c8c9cc;
+        }
+    }
+}
+</style>