uview-pro 0.0.1

package/components/u-subsection/u-subsection.vue

@@ -0,0 +1,388 @@
+<template>
+    <view :id="instanceId" class="u-subsection" :style="subsectionStyle">
+        <view
+            class="u-item u-line-1"
+            :style="itemStyle(index)"
+            @tap="click(index)"
+            :class="[noBorderRight(index), `u-item-${index}`]"
+            v-for="(item, index) in listInfo"
+            :key="index"
+        >
+            <view :style="textStyle(index)" class="u-item-text u-line-1">{{ item.name }}</view>
+        </view>
+        <view class="u-item-bg" :style="itemBarStyle"></view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-subsection' });
+
+/**
+ * subsection 分段器
+ * @description 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @tutorial https://www.uviewui.com/components/subsection.html
+ * @property {Array} list 选项的数组，形式见上方"基本使用"
+ * @property {String | Number} current 初始化时默认选中的选项索引值（默认0）
+ * @property {String} activeColor 激活时的颜色，mode为subsection时固定为白色（默认#303133）
+ * @property {String} inactiveColor 未激活时字体的颜色，mode为subsection时无效（默认#606266）
+ * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
+ * @property {String | Number} fontSize 字体大小，单位rpx（默认28）
+ * @property {String | Number} height 组件高度，单位rpx（默认70）
+ * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
+ * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
+ * @property {String} bgColor 组件背景颜色，mode为button时有效（默认#eeeeef）
+ * @property {String} buttonColor 按钮背景颜色，mode为button时有效（默认#ffffff）
+ * @property {Boolean} vibrateShort 在切换分段器的时候，是否让设备震一下（默认false）
+ * @event {Function} change 分段器选项发生改变时触发
+ * @example <u-subsection active-color="#ff9900"></u-subsection>
+ */
+
+interface ListItem {
+    name: string;
+    width?: number;
+    [key: string]: any;
+}
+
+const props = defineProps({
+    /** tab的数据 */
+    list: {
+        type: Array as () => Array<string | ListItem>,
+        default: () => []
+    },
+    /** 当前活动的tab的index */
+    current: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 激活的颜色 */
+    activeColor: {
+        type: String,
+        default: '#303133'
+    },
+    /** 未激活的颜色 */
+    inactiveColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 */
+    mode: {
+        type: String,
+        default: 'button'
+    },
+    /** 字体大小，单位rpx */
+    fontSize: {
+        type: [Number, String],
+        default: 28
+    },
+    /** 是否开启动画效果 */
+    animation: {
+        type: Boolean,
+        default: true
+    },
+    /** 组件的高度，单位rpx */
+    height: {
+        type: [Number, String],
+        default: 70
+    },
+    /** 激活tab的字体是否加粗 */
+    bold: {
+        type: Boolean,
+        default: true
+    },
+    /** mode=button时，组件背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#eeeeef'
+    },
+    /** mode = button时，滑块背景颜色 */
+    buttonColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 在切换分段器的时候，是否让设备震一下 */
+    vibrateShort: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits<{ (e: 'change', index: number): void }>();
+
+// 组件内部状态
+const listInfo = ref<ListItem[]>([]);
+const itemBgStyle = ref<{ [key: string]: any }>({
+    width: 0,
+    left: 0,
+    backgroundColor: '#ffffff',
+    height: '100%',
+    transition: ''
+});
+const currentIndex = ref(Number(props.current));
+const buttonPadding = 3; // mode = button 时，组件的内边距
+const borderRadius = 5; // 圆角值
+const firstTimeVibrateShort = ref(true); // 组件初始化时，会触发current变化，此时不应震动
+const instanceId = $u.guid(); // 组件唯一 id
+const instance = getCurrentInstance();
+
+// 监听 current 变化
+watch(
+    () => props.current,
+    nVal => {
+        currentIndex.value = Number(nVal);
+        changeSectionStatus(currentIndex.value);
+    },
+    { immediate: true }
+);
+
+// 初始化 listInfo
+function initListInfo() {
+    // 将list的数据，传入listInfo数组，因为不能修改props传递的list值
+    // 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
+    listInfo.value = props.list.map(val => {
+        if (typeof val !== 'object') {
+            return { width: 0, name: val };
+        } else {
+            return { ...val, width: 0 };
+        }
+    });
+}
+
+initListInfo();
+
+onMounted(() => {
+    setTimeout(() => {
+        getTabsInfo();
+    }, 10);
+});
+
+/**
+ * 设置mode=subsection时，滑块特有的样式
+ */
+const noBorderRight = computed<(index: number) => string>(() => {
+    return (index: number) => {
+        if (props.mode !== 'subsection') return '';
+        let classs = '';
+        // 不显示右边的边框
+        if (index < props.list.length - 1) classs += ' u-none-border-right';
+        // 显示整个组件的左右边圆角
+        if (index === 0) classs += ' u-item-first';
+        if (index === props.list.length - 1) classs += ' u-item-last';
+        return classs;
+    };
+});
+
+/**
+ * 文字的样式
+ */
+const textStyle = computed<(index: number) => Record<string, any>>(() => {
+    return (index: number) => {
+        const style: Record<string, any> = {};
+        // 设置字体颜色
+        if (props.mode === 'subsection') {
+            style.color = index === currentIndex.value ? '#ffffff' : props.activeColor;
+        } else {
+            style.color = index === currentIndex.value ? props.activeColor : props.inactiveColor;
+        }
+        // 字体加粗
+        if (index === currentIndex.value && props.bold) style.fontWeight = 'bold';
+        // 文字大小
+        style.fontSize = props.fontSize + 'rpx';
+        return style;
+    };
+});
+
+/**
+ * 每个分段器item的样式
+ */
+const itemStyle = computed<(index: number) => Record<string, any>>(() => {
+    return (index: number) => {
+        const style: Record<string, any> = {};
+        if (props.mode === 'subsection') {
+            style.borderColor = props.activeColor;
+            style.borderWidth = '1px';
+            style.borderStyle = 'solid';
+        }
+        return style;
+    };
+});
+
+/**
+ * mode=button时，外层view的样式
+ */
+const subsectionStyle = computed<Record<string, any>>(() => {
+    const style: Record<string, any> = {};
+    style.height = uni.upx2px(Number(props.height)) + 'px';
+    if (props.mode === 'button') {
+        style.backgroundColor = props.bgColor;
+        style.padding = `${buttonPadding}px`;
+        style.borderRadius = `${borderRadius}px`;
+    }
+    return style;
+});
+
+/**
+ * 滑块的样式
+ */
+const itemBarStyle = computed<Record<string, any>>(() => {
+    const style: Record<string, any> = {};
+    style.backgroundColor = props.activeColor;
+    style.zIndex = 1;
+    if (props.mode === 'button') {
+        style.backgroundColor = props.buttonColor;
+        style.borderRadius = `${borderRadius}px`;
+        style.bottom = `${buttonPadding}px`;
+        style.height = uni.upx2px(Number(props.height)) - buttonPadding * 2 + 'px';
+        style.zIndex = 0;
+    }
+    return Object.assign({}, itemBgStyle.value, style);
+});
+
+/**
+ * 改变滑块的样式
+ * @param nVal 当前选中索引
+ */
+function changeSectionStatus(nVal: number) {
+    if (props.mode === 'subsection') {
+        // 根据滑块在最左边和最右边时，显示左边和右边的圆角
+        if (nVal === props.list.length - 1) {
+            itemBgStyle.value.borderRadius = `0 ${buttonPadding}px ${buttonPadding}px 0`;
+        }
+        if (nVal === 0) {
+            itemBgStyle.value.borderRadius = `${buttonPadding}px 0 0 ${buttonPadding}px`;
+        }
+        if (nVal > 0 && nVal < props.list.length - 1) {
+            itemBgStyle.value.borderRadius = '0';
+        }
+    }
+    // 更新滑块的位置
+    setTimeout(() => {
+        itemBgLeft();
+    }, 10);
+    if (props.vibrateShort && !firstTimeVibrateShort.value) {
+        // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+        // #ifndef H5
+        uni.vibrateShort();
+        // #endif
+    }
+    // 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
+    firstTimeVibrateShort.value = false;
+}
+
+/**
+ * 点击分段器选项
+ * @param index 当前点击索引
+ */
+function click(index: number) {
+    // 不允许点击当前激活选项
+    if (index === currentIndex.value) return;
+    currentIndex.value = index;
+    changeSectionStatus(index);
+    emit('change', index);
+}
+
+/**
+ * 获取各个tab的节点信息
+ */
+function getTabsInfo() {
+    const view = uni.createSelectorQuery().in(instance?.proxy);
+    for (let i = 0; i < props.list.length; i++) {
+        view.select(`#${instanceId} .u-item-${i}`).boundingClientRect();
+    }
+    view.exec((res: any[]) => {
+        if (!res.length) {
+            setTimeout(() => {
+                getTabsInfo();
+                return;
+            }, 10);
+        }
+        // 将分段器每个item的宽度，放入listInfo数组
+        res.map((val, index) => {
+            listInfo.value[index].width = val.width;
+        });
+        // 初始化滑块的宽度
+        if (props.mode === 'subsection' || props.mode === 'button') {
+            itemBgStyle.value.width = listInfo.value[0]?.width + 'px';
+        }
+        // 初始化滑块的位置
+        itemBgLeft();
+    });
+}
+
+/**
+ * 计算滑块左侧距离
+ */
+function itemBgLeft() {
+    // 根据是否开启动画效果
+    if (props.animation) {
+        itemBgStyle.value.transition = 'all 0.35s';
+    } else {
+        itemBgStyle.value.transition = 'all 0s';
+    }
+    let left = 0;
+    // 计算当前活跃item到组件左边的距离
+    listInfo.value.forEach((val, index) => {
+        if (index < currentIndex.value) left += val.width ?? 0;
+    });
+    // 根据mode不同模式，计算滑块需要移动的距离
+    if (props.mode === 'subsection') {
+        itemBgStyle.value.left = left + 'px';
+    } else if (props.mode === 'button') {
+        itemBgStyle.value.left = left + buttonPadding + 'px';
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-subsection {
+    @include vue-flex;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.u-item {
+    flex: 1;
+    text-align: center;
+    font-size: 26rpx;
+    height: 100%;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    color: $u-main-color;
+    padding: 0 6rpx;
+}
+
+.u-item-bg {
+    background-color: $u-type-primary;
+    position: absolute;
+    z-index: -1;
+}
+
+.u-none-border-right {
+    border-right: none !important;
+}
+
+.u-item-first {
+    border-top-left-radius: 8rpx;
+    border-bottom-left-radius: 8rpx;
+}
+
+.u-item-last {
+    border-top-right-radius: 8rpx;
+    border-bottom-right-radius: 8rpx;
+}
+
+.u-item-text {
+    transition: all 0.35s;
+    color: $u-main-color;
+    @include vue-flex;
+    align-items: center;
+    position: relative;
+    z-index: 3;
+}
+</style>

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

@@ -0,0 +1,289 @@
+<template>
+    <view class="">
+        <movable-area class="u-swipe-action" :style="{ backgroundColor: props.bgColor }">
+            <movable-view
+                class="u-swipe-view"
+                @change="change"
+                @touchend="touchend"
+                @touchstart="touchstart"
+                direction="horizontal"
+                :disabled="props.disabled"
+                :inertia="true"
+                :x="moveX"
+                :style="{ width: movableViewWidth ? movableViewWidth : '100%' }"
+            >
+                <view class="u-swipe-content" @tap.stop="contentClick">
+                    <slot></slot>
+                </view>
+                <view class="u-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="btnStyle(item.style)" v-for="(item, index) in props.options" :key="index">
+                    <view class="u-btn-text">{{ item.text }}</view>
+                </view>
+            </movable-view>
+        </movable-area>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-swipe-action' });
+
+/**
+ * swipeAction 左滑单元格
+ * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
+ * @tutorial https://www.uviewui.com/components/swipeAction.html
+ * @property {String} bg-color 整个组件背景颜色（默认#ffffff）
+ * @property {Array} options 数组形式，可以配置背景颜色和文字
+ * @property {String|Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可
+ * @property {String|Number} btn-width 按钮宽度，单位rpx（默认180）
+ * @property {Boolean} disabled 是否禁止某个swipeAction滑动（默认false）
+ * @property {Boolean} show 打开或者关闭某个组件（默认false）
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 组件触发关闭状态时
+ * @event {Function} content-click 点击内容时触发
+ * @event {Function} open 组件触发打开状态时
+ * @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
+ */
+
+const props = defineProps({
+    /** index值，用于得知点击删除的是哪个按钮 */
+    index: {
+        type: [Number, String],
+        default: ''
+    },
+    /** 滑动按钮的宽度，单位为rpx */
+    btnWidth: {
+        type: [String, Number],
+        default: 180
+    },
+    /** 是否禁止某个action滑动 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 打开或者关闭组件 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 组件背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) */
+    vibrateShort: {
+        type: Boolean,
+        default: false
+    },
+    /** 按钮操作参数 */
+    options: {
+        type: Array as () => Array<{ text: string; style?: Record<string, any> }>,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['click', 'close', 'content-click', 'open']);
+
+// 组件内部状态
+const moveX = ref(0); // movable-view元素在x轴上需要移动的目标移动距离，用于展开或收起滑动的按钮
+const scrollX = ref(0); // movable-view移动过程中产生的change事件中的x轴移动值
+const status = ref(false); // 滑动的状态，表示当前是展开还是关闭按钮的状态
+const movableAreaWidth = ref(0); // 滑动区域
+const elId = ref($u.guid()); // id，用于通知另外组件关闭时的识别
+const showBtn = ref(false); // 刚开始渲染视图时不显示右边的按钮，避免视图闪动
+
+// 计算属性
+const movableViewWidth = computed(() => {
+    return movableAreaWidth.value + allBtnWidth.value + 'px';
+});
+const innerBtnWidth = computed(() => {
+    // 保证类型安全，btnWidth 转为 number
+    return uni.upx2px(Number(props.btnWidth));
+});
+const allBtnWidth = computed(() => {
+    return uni.upx2px(Number(props.btnWidth)) * props.options.length;
+});
+const btnStyle = (style: Record<string, any> = {}) => {
+    // 按钮样式处理
+    style.width = props.btnWidth + 'rpx';
+    return style;
+};
+
+// 监听 show 属性变化，控制展开/收起
+watch(
+    () => props.show,
+    nVal => {
+        if (nVal) {
+            open();
+        } else {
+            close();
+        }
+    },
+    { immediate: true, deep: true }
+);
+
+// 生命周期
+onMounted(() => {
+    getActionRect();
+});
+
+/**
+ * 点击按钮
+ * @param index 当前按钮索引
+ */
+function btnClick(index: number) {
+    status.value = false;
+    // this.index为点击的几个组件，index为点击某个组件的第几个按钮(options数组的索引)
+    emit('click', props.index, index);
+}
+
+/**
+ * movable-view元素移动事件
+ */
+function change(e: { detail: { x: number } }) {
+    scrollX.value = e.detail.x;
+}
+
+/**
+ * 关闭按钮状态
+ */
+function close() {
+    moveX.value = 0;
+    status.value = false;
+}
+
+/**
+ * 打开按钮的状态
+ */
+function open() {
+    if (props.disabled) return;
+    moveX.value = -allBtnWidth.value;
+    status.value = true;
+}
+
+/**
+ * 用户手指离开movable-view元素，停止触摸
+ */
+function touchend() {
+    moveX.value = scrollX.value;
+    // 停止触摸时候，判断当前是展开还是关闭状态
+    // 关闭状态
+    // 这一步很重要，需要先给moveX一个变化的随机值，否则因为前后设置的为同一个值
+    // props单向数据流的原因，导致movable-view元素不会发生变化，切记，详见文档：
+    // https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98
+    // https://uniapp.dcloud.net.cn/tutorial/vue-api.html#componentsolutions
+    nextTick(() => {
+        if (status.value == false) {
+            // 关闭状态左滑，产生的x轴位移为负值，也就是说滑动的距离大于按钮的四分之一宽度，自动展开按钮
+            if (scrollX.value <= -allBtnWidth.value / 4) {
+                moveX.value = -allBtnWidth.value; // 按钮宽度的负值，即为展开状态movable-view元素左滑的距离
+                status.value = true; // 标志当前为展开状态
+                emitOpenEvent();
+                // 产生震动效果
+                if (props.vibrateShort) uni.vibrateShort();
+            } else {
+                moveX.value = 0; // 如果距离没有按钮宽度的四分之一，自动收起
+                status.value = false;
+                emitCloseEvent();
+            }
+        } else {
+            // 如果在打开的状态下，右滑动的距离X轴偏移超过按钮的四分之一(负值反过来的四分之三)，自动收起按钮
+            if (scrollX.value > (-allBtnWidth.value * 3) / 4) {
+                moveX.value = 0;
+                nextTick(() => {
+                    moveX.value = 101;
+                });
+                status.value = false;
+                emitCloseEvent();
+            } else {
+                moveX.value = -allBtnWidth.value;
+                status.value = true;
+                emitOpenEvent();
+            }
+        }
+    });
+}
+
+/**
+ * 触发 open 事件
+ */
+function emitOpenEvent() {
+    emit('open', props.index);
+}
+
+/**
+ * 触发 close 事件
+ */
+function emitCloseEvent() {
+    emit('close', props.index);
+}
+
+/**
+ * 开始触摸
+ */
+function touchstart() {
+    // ...可扩展触摸逻辑
+}
+
+/**
+ * 获取滑动区域宽度
+ */
+function getActionRect() {
+    $u.getRect('.u-swipe-action').then((res: { width: number }) => {
+        movableAreaWidth.value = res.width;
+        // 等视图更新完后，再显示右边的可滑动按钮，防止这些按钮会"闪一下"
+        nextTick(() => {
+            showBtn.value = true;
+        });
+    });
+}
+
+/**
+ * 点击内容触发事件
+ */
+function contentClick() {
+    // 点击内容时，如果当前为打开状态，收起组件
+    if (status.value == true) {
+        status.value = false;
+        moveX.value = 0;
+    }
+    emit('content-click', props.index);
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-swipe-action {
+    width: auto;
+    height: initial;
+    position: relative;
+    overflow: hidden;
+}
+
+.u-swipe-view {
+    @include vue-flex;
+    height: initial;
+    position: relative;
+    /* 这一句很关键，覆盖默认的绝对定位 */
+}
+
+.u-swipe-content {
+    flex: 1;
+}
+
+.u-swipe-del {
+    position: relative;
+    font-size: 30rpx;
+    color: #ffffff;
+}
+
+.u-btn-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+</style>