uview-pro 0.0.1

package/components/u-swiper/u-swiper.vue

@@ -0,0 +1,305 @@
+<template>
+    <view class="u-swiper-wrap" :style="{ borderRadius: `${borderRadius}rpx` }">
+        <swiper
+            :current="elCurrent"
+            @change="change"
+            @animationfinish="animationfinish"
+            :interval="interval"
+            :circular="circular"
+            :duration="duration"
+            :autoplay="autoplay"
+            :previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
+            :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
+            :style="{ height: height + 'rpx', backgroundColor: bgColor }"
+        >
+            <swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
+                <view
+                    class="u-list-image-wrap"
+                    @tap.stop.prevent="listClick(index)"
+                    :class="[uCurrent != index ? 'u-list-scale' : '']"
+                    :style="{
+                        borderRadius: `${borderRadius}rpx`,
+                        transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
+                        margin: effect3d && uCurrent != index ? '0 20rpx' : 0
+                    }"
+                >
+                    <image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image>
+                    <view v-if="title && item.title" class="u-swiper-title u-line-1" :style="[{ 'padding-bottom': titlePaddingBottom }, titleStyle]">
+                        {{ item.title }}
+                    </view>
+                </view>
+            </swiper-item>
+        </swiper>
+        <view
+            class="u-swiper-indicator"
+            :style="{
+                top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
+                bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
+                justifyContent: justifyContent,
+                padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
+            }"
+        >
+            <block v-if="mode == 'rect'">
+                <view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list" :key="index"></view>
+            </block>
+            <block v-if="mode == 'dot'">
+                <view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list" :key="index"></view>
+            </block>
+            <block v-if="mode == 'round'">
+                <view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list" :key="index"></view>
+            </block>
+            <block v-if="mode == 'number'">
+                <view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view>
+            </block>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+defineOptions({ name: 'u-swiper' });
+/**
+ * swiper 轮播图
+ * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用
+ * @tutorial https://www.uviewui.com/components/swiper.html
+ * @property {Array} list 轮播图数据，见官网"基本使用"说明
+ * @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false）
+ * @property {String} mode 指示器模式，见官网说明（默认round）
+ * @property {String|Number} height 轮播图组件高度，单位rpx（默认250）
+ * @property {String} indicator-pos 指示器的位置（默认bottomCenter）
+ * @property {Boolean} effect3d 是否开启3D效果（默认false）
+ * @property {Boolean} autoplay 是否自动播放（默认true）
+ * @property {String|Number} interval 自动轮播时间间隔，单位ms（默认2500）
+ * @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
+ * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String|Number} border-radius 轮播图圆角值，单位rpx（默认8）
+ * @property {Object} title-style 自定义标题样式
+ * @property {String|Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）
+ * @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
+ * @event {Function} click 点击轮播图时触发
+ * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
+ */
+
+// props 定义，保留参数注释
+const props = defineProps({
+    /** 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选 */
+    list: { type: Array as () => Array<Record<string, any>>, default: () => [] },
+    /** 是否显示title标题 */
+    title: { type: Boolean, default: false },
+    /** 用户自定义的指示器的样式 */
+    indicator: { type: Object, default: () => ({}) },
+    /** 圆角值 */
+    borderRadius: { type: [Number, String], default: 8 },
+    /** 隔多久自动切换 */
+    interval: { type: [String, Number], default: 3000 },
+    /** 指示器的模式，rect|dot|number|round */
+    mode: { type: String, default: 'round' },
+    /** list的高度，单位rpx */
+    height: { type: [Number, String], default: 250 },
+    /** 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight */
+    indicatorPos: { type: String, default: 'bottomCenter' },
+    /** 是否开启缩放效果 */
+    effect3d: { type: Boolean, default: false },
+    /** 3D模式的情况下，激活item与前后item之间的距离，单位rpx */
+    effect3dPreviousMargin: { type: [Number, String], default: 50 },
+    /** 是否自动播放 */
+    autoplay: { type: Boolean, default: true },
+    /** 自动轮播时间间隔，单位ms */
+    duration: { type: [Number, String], default: 500 },
+    /** 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张 */
+    circular: { type: Boolean, default: true },
+    /** 图片的裁剪模式 */
+    imgMode: { type: String, default: 'aspectFill' },
+    /** 从list数组中读取的图片的属性名 */
+    name: { type: String, default: 'image' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '#f3f4f6' },
+    /** 初始化时，默认显示第几项 */
+    current: { type: [Number, String], default: 0 },
+    /** 标题的样式，对象形式 */
+    titleStyle: { type: Object, default: () => ({}) }
+});
+
+// emits 定义
+const emit = defineEmits(['click', 'change']);
+
+// 当前活跃的swiper-item的index
+const uCurrent = ref(Number(props.current));
+
+// 监听list变化，重置uCurrent值，避免溢出
+watch(
+    () => props.list,
+    (nVal, oVal) => {
+        if (nVal.length !== oVal.length) uCurrent.value = 0;
+    }
+);
+// 监听外部current的变化，实时修改内部依赖于此测uCurrent值
+watch(
+    () => props.current,
+    n => {
+        uCurrent.value = Number(n);
+    }
+);
+
+// 容器 justifyContent
+const justifyContent = computed(() => {
+    if (props.indicatorPos == 'topLeft' || props.indicatorPos == 'bottomLeft') return 'flex-start';
+    if (props.indicatorPos == 'topCenter' || props.indicatorPos == 'bottomCenter') return 'center';
+    if (props.indicatorPos == 'topRight' || props.indicatorPos == 'bottomRight') return 'flex-end';
+    return 'center';
+});
+
+// 标题下边距
+const titlePaddingBottom = computed(() => {
+    if (props.mode == 'none') return '12rpx';
+    if (['bottomLeft', 'bottomCenter', 'bottomRight'].includes(props.indicatorPos) && props.mode == 'number') {
+        return '60rpx';
+    } else if (['bottomLeft', 'bottomCenter', 'bottomRight'].includes(props.indicatorPos) && props.mode != 'number') {
+        return '40rpx';
+    } else {
+        return '12rpx';
+    }
+});
+
+// swiper组件current参数只接受Number类型
+const elCurrent = computed(() => Number(props.current));
+
+/**
+ * 点击轮播图项
+ */
+function listClick(index: number) {
+    emit('click', index);
+}
+
+/**
+ * swiper change事件
+ */
+function change(e: any) {
+    const current = e.detail.current;
+    uCurrent.value = current;
+    emit('change', current);
+}
+
+/**
+ * swiper animationfinish事件
+ * 头条小程序不支持animationfinish事件，改由change事件
+ * 暂不监听此事件，因为不再给swiper绑定uCurrent属性
+ */
+function animationfinish(e: any) {
+    // #ifndef MP-TOUTIAO
+    // uCurrent.value = e.detail.current
+    // #endif
+}
+
+defineExpose({ listClick, change, animationfinish });
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-swiper-wrap {
+    position: relative;
+    overflow: hidden;
+    transform: translateY(0);
+}
+
+.u-swiper-image {
+    width: 100%;
+    will-change: transform;
+    height: 100%;
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+    /* #ifdef H5 */
+    pointer-events: none;
+    /* #endif */
+}
+
+.u-swiper-indicator {
+    padding: 0 24rpx;
+    position: absolute;
+    @include vue-flex;
+    width: 100%;
+    z-index: 1;
+}
+
+.u-indicator-item-rect {
+    width: 26rpx;
+    height: 8rpx;
+    margin: 0 6rpx;
+    transition: all 0.5s;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.u-indicator-item-rect-active {
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+.u-indicator-item-dot {
+    width: 14rpx;
+    height: 14rpx;
+    margin: 0 6rpx;
+    border-radius: 20rpx;
+    transition: all 0.5s;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.u-indicator-item-dot-active {
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+.u-indicator-item-round {
+    width: 14rpx;
+    height: 14rpx;
+    margin: 0 6rpx;
+    border-radius: 20rpx;
+    transition: all 0.5s;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.u-indicator-item-round-active {
+    width: 34rpx;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+.u-indicator-item-number {
+    padding: 6rpx 16rpx;
+    line-height: 1;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 100rpx;
+    font-size: 26rpx;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.u-list-scale {
+    transform-origin: center center;
+}
+
+.u-list-image-wrap {
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    transition: all 0.5s;
+    overflow: hidden;
+    box-sizing: content-box;
+    position: relative;
+}
+
+.u-swiper-title {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.3);
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    font-size: 28rpx;
+    padding: 12rpx 24rpx;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.u-swiper-item {
+    @include vue-flex;
+    overflow: hidden;
+    align-items: center;
+}
+</style>

package/components/u-switch/u-switch.vue

@@ -0,0 +1,146 @@
+<template>
+    <view class="u-switch" :class="[modelValue == true ? 'u-switch--on' : '', disabled ? 'u-switch--disabled' : '']" @tap="onClick" :style="[switchStyle]">
+        <view
+            class="u-switch__node node-class"
+            :style="{
+                width: $u.addUnit(size ?? 50),
+                height: $u.addUnit(size ?? 50)
+            }"
+        >
+            <u-loading :show="loading" class="u-switch__loading" :size="Number(size) * 0.6" :color="loadingColor" />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-switch'
+});
+
+/**
+ * switch 开关选择器
+ * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
+ * @tutorial https://www.uviewui.com/components/switch.html
+ * @property {Boolean} loading 是否处于加载中（默认false）
+ * @property {Boolean} disabled 是否禁用（默认false）
+ * @property {String|Number} size 开关尺寸，单位rpx（默认50）
+ * @property {String} active-color 打开时的背景色（默认#2979ff）
+ * @property {String} inactive-color 关闭时的背景色（默认#ffffff）
+ * @property {Boolean|Number|String} active-value 打开选择器时通过change事件发出的值（默认true）
+ * @property {Boolean|Number|String} inactive-value 关闭选择器时通过change事件发出的值（默认false）
+ * @event {Function} change 在switch打开或关闭时触发
+ * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
+ */
+const props = defineProps({
+    /** 是否为加载中状态 */
+    loading: { type: Boolean, default: false },
+    /** 是否为禁用状态 */
+    disabled: { type: Boolean, default: false },
+    /** 开关尺寸，单位rpx */
+    size: { type: [Number, String], default: 50 },
+    /** 打开时的背景颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 关闭时的背景颜色 */
+    inactiveColor: { type: String, default: '#ffffff' },
+    /** 通过v-model双向绑定的值 */
+    modelValue: { type: Boolean, default: false },
+    /** 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) */
+    vibrateShort: { type: Boolean, default: false },
+    /** 打开选择器时的值 */
+    activeValue: { type: [Number, String, Boolean], default: true },
+    /** 关闭选择器时的值 */
+    inactiveValue: { type: [Number, String, Boolean], default: false }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+/**
+ * 计算开关样式
+ */
+const switchStyle = computed(() => {
+    let style: Record<string, string> = {};
+    style.fontSize = props.size + 'rpx';
+    style.backgroundColor = props.modelValue ? props.activeColor : props.inactiveColor;
+    return style;
+});
+/**
+ * 计算加载动画颜色
+ */
+const loadingColor = computed(() => {
+    return props.modelValue ? props.activeColor : null;
+});
+
+/**
+ * 点击开关
+ */
+function onClick() {
+    if (!props.disabled && !props.loading) {
+        // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+        if (props.vibrateShort) uni.vibrateShort();
+        emit('update:modelValue', !props.modelValue);
+        // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+        nextTick(() => {
+            emit('change', props.modelValue ? props.activeValue : props.inactiveValue);
+        });
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-switch {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: inline-block;
+    /* #endif */
+    box-sizing: initial;
+    width: 2em;
+    height: 1em;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 1em;
+    transition: background-color 0.3s;
+    font-size: 50rpx;
+}
+
+.u-switch__node {
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 100%;
+    z-index: 1;
+    background-color: #fff;
+    background-color: #fff;
+    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+    transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05), -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+    transition: transform cubic-bezier(0.3, 1.05, 0.4, 1.05);
+    transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+}
+
+.u-switch__loading {
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.u-switch--on {
+    background-color: #1989fa;
+}
+
+.u-switch--on .u-switch__node {
+    transform: translateX(100%);
+}
+
+.u-switch--disabled {
+    opacity: 0.4;
+}
+</style>