uview-pro 0.0.1

package/components/u-section/u-section.vue

@@ -0,0 +1,175 @@
+<template>
+    <view class="u-section">
+        <view
+            class="u-section__title"
+            :style="{
+                fontWeight: bold ? 'bold' : 'normal',
+                color: color,
+                fontSize: fontSize + 'rpx',
+                paddingLeft: showLine ? Number(fontSize) * 0.7 + 'rpx' : 0
+            }"
+            :class="{
+                'u-section--line': showLine
+            }"
+        >
+            <view class="u-section__title__icon-wrap u-flex" :style="lineStyle" v-if="showLine">
+                <u-icon top="0" name="column-line" :size="Number(fontSize) * 1.25" bold :color="lineColor ? lineColor : color"></u-icon>
+            </view>
+            <text class="u-flex u-section__title__text">{{ title }}</text>
+        </view>
+        <view
+            class="u-section__right-info"
+            v-if="right || $slots.right"
+            :style="{
+                color: subColor
+            }"
+            @tap="rightClick"
+        >
+            <slot name="right" v-if="$slots.right" />
+            <template v-else>
+                {{ subTitle }}
+                <view class="u-section__right-info__icon-arrow u-flex" v-if="arrow">
+                    <u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
+                </view>
+            </template>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-section' });
+
+/**
+ * section 查看更多
+ * @description 该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。
+ * @tutorial https://www.uviewui.com/components/section.html
+ * @property {String} title 左边主标题
+ * @property {String} subTitle 右边副标题（默认更多）
+ * @property {Boolean} right 是否显示右边的内容（默认true）
+ * @property {Boolean} showLine 是否显示左边的竖条（默认true）
+ * @property {Boolean} arrow 是否显示右边箭头（默认true）
+ * @property {String|Number} fontSize 主标题的字体大小（默认28）
+ * @property {Boolean} bold 主标题是否加粗（默认true）
+ * @property {String} color 主标题颜色（默认#303133）
+ * @property {String} subColor 右边副标题颜色（默认#909399）
+ * @property {String} lineColor 左边竖线的颜色
+ * @event click 组件右侧的内容被点击时触发，用于跳转"更多"
+ * @example <u-section title="今日热门" :right="false"></u-section>
+ */
+
+const props = defineProps({
+    /** 标题信息 */
+    title: {
+        type: String,
+        default: ''
+    },
+    /** 右边副标题内容 */
+    subTitle: {
+        type: String,
+        default: '更多'
+    },
+    /** 是否显示右边的内容 */
+    right: {
+        type: Boolean,
+        default: true
+    },
+    /** 主标题的字体大小 */
+    fontSize: {
+        type: [Number, String],
+        default: 28
+    },
+    /** 主标题是否加粗 */
+    bold: {
+        type: Boolean,
+        default: true
+    },
+    /** 主标题的颜色 */
+    color: {
+        type: String,
+        default: '#303133'
+    },
+    /** 右边副标题的颜色 */
+    subColor: {
+        type: String,
+        default: '#909399'
+    },
+    /** 是否显示左边的竖条 */
+    showLine: {
+        type: Boolean,
+        default: true
+    },
+    /** 左边竖线的颜色 */
+    lineColor: {
+        type: String,
+        default: ''
+    },
+    /** 是否显示右边箭头 */
+    arrow: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits(['click']);
+
+/**
+ * 左边竖条的样式
+ * @description 由于安卓和iOS的，需要稍微调整绝对定位的top值，才能让左边的竖线和右边的文字垂直居中
+ */
+const lineStyle = computed(() => {
+    let isIOS = $u.os && $u.os() === 'ios';
+    return {
+        // 由于竖线为字体图标，具有比实际线宽更宽的宽度，所以也需要根据字体打下动态调整
+        left: -(Number(props.fontSize) * 0.9) + 'rpx',
+        top: -(Number(props.fontSize) * (isIOS ? 0.14 : 0.15)) + 'rpx'
+    };
+});
+
+/**
+ * 组件右侧的内容被点击时触发，用于跳转"更多"
+ */
+function rightClick() {
+    emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-section {
+    @include vue-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    &__title {
+        position: relative;
+        font-size: 28rpx;
+        padding-left: 20rpx;
+        @include vue-flex;
+        align-items: center;
+
+        &__icon-wrap {
+            position: absolute;
+        }
+
+        &__text {
+            line-height: 1;
+        }
+    }
+
+    &__right-info {
+        color: $u-tips-color;
+        font-size: 26rpx;
+        @include vue-flex;
+        align-items: center;
+
+        &__icon-arrow {
+            margin-left: 6rpx;
+        }
+    }
+}
+</style>

package/components/u-select/u-select.vue

@@ -0,0 +1,387 @@
+<template>
+    <view class="u-select">
+        <!-- <view class="u-select__action" :class="{
+		'u-select--border': border
+	}" @tap.stop="selectHandler">
+		<view class="u-select__action__icon" :class="{
+			'u-select__action__icon--reverse': value == true
+		}">
+			<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
+		</view>
+	</view> -->
+        <u-popup
+            :maskCloseAble="maskCloseAble"
+            mode="bottom"
+            :popup="false"
+            v-model="popupValue"
+            length="auto"
+            :safeAreaInsetBottom="safeAreaInsetBottom"
+            @close="close"
+            :z-index="uZIndex"
+        >
+            <view class="u-select">
+                <view class="u-select__header" @touchmove.stop.prevent="">
+                    <view
+                        class="u-select__header__cancel u-select__header__btn"
+                        :style="{ color: cancelColor }"
+                        hover-class="u-hover-class"
+                        :hover-stay-time="150"
+                        @tap="getResult('cancel')"
+                    >
+                        {{ cancelText }}
+                    </view>
+                    <view class="u-select__header__title">
+                        {{ title }}
+                    </view>
+                    <view
+                        class="u-select__header__confirm u-select__header__btn"
+                        :style="{ color: moving ? cancelColor : confirmColor }"
+                        hover-class="u-hover-class"
+                        :hover-stay-time="150"
+                        @touchmove.stop=""
+                        @tap.stop="getResult('confirm')"
+                    >
+                        {{ confirmText }}
+                    </view>
+                </view>
+                <view class="u-select__body">
+                    <picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector" @pickstart="pickstart" @pickend="pickend" v-if="modelValue">
+                        <picker-view-column v-for="(item, index) in columnData" :key="index">
+                            <view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="index1">
+                                <view class="u-line-1">{{ item1[labelName] }}</view>
+                            </view>
+                        </picker-view-column>
+                    </picker-view>
+                </view>
+            </view>
+        </u-popup>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+defineOptions({
+    name: 'u-select'
+});
+
+/**
+ * select 列选择器
+ * @description 此选择器用于单列，多列，多列联动的选择场景。(从1.3.0版本起，不建议使用Picker组件的单列和多列模式，Select组件是专门为列选择而构造的组件，更简单易用。)
+ * @tutorial http://uviewui.com/components/select.html
+ * @property {String} mode 模式选择，"single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
+ * @property {Array} list 列数据，数组形式，见官网说明
+ * @property {Boolean} v-model 布尔值变量，用于控制选择器的弹出与收起
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
+ * @property {String} cancel-color 取消按钮的颜色（默认#606266）
+ * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
+ * @property {String} confirm-text 确认按钮的文字
+ * @property {String} cancel-text 取消按钮的文字
+ * @property {String} default-value 提供的默认选中的下标，见官网说明
+ * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
+ * @property {String Number} z-index 弹出时的z-index值(默认10075)
+ * @property {String} value-name 自定义list数据的value属性名 1.3.6
+ * @property {String} label-name 自定义list数据的label属性名 1.3.6
+ * @property {String} child-name 自定义list数据的children属性名，只对多列联动模式有效 1.3.7
+ * @event {Function} confirm 点击确定按钮，返回当前选择的值
+ * @example <u-select v-model="show" :list="list"></u-select>
+ */
+
+const props = defineProps({
+    /** 列数据 */
+    list: { type: Array, default: () => [] },
+    /** 是否显示边框 */
+    border: { type: Boolean, default: true },
+    /** 通过双向绑定控制组件的弹出与收起 */
+    modelValue: { type: Boolean, default: false },
+    /** "取消"按钮的颜色 */
+    cancelColor: { type: String, default: '#606266' },
+    /** "确定"按钮的颜色 */
+    confirmColor: { type: String, default: '#2979ff' },
+    /** 弹出的z-index值 */
+    zIndex: { type: [String, Number], default: 0 },
+    /** 是否开启底部安全区适配 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 是否允许通过点击遮罩关闭Picker */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 提供的默认选中的下标 */
+    defaultValue: { type: Array, default: () => [0] },
+    /** 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动 */
+    mode: { type: String, default: 'single-column' },
+    /** 自定义value属性名 */
+    valueName: { type: String, default: 'value' },
+    /** 自定义label属性名 */
+    labelName: { type: String, default: 'label' },
+    /** 自定义多列联动模式的children属性名 */
+    childName: { type: String, default: 'children' },
+    /** 顶部标题 */
+    title: { type: String, default: '' },
+    /** 取消按钮的文字 */
+    cancelText: { type: String, default: '取消' },
+    /** 确认按钮的文字 */
+    confirmText: { type: String, default: '确认' }
+});
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'click']);
+// 用于列改变时，保存当前的索引，下一次变化时比较得出是哪一列发生了变化
+
+const defaultSelector = ref<number[]>([0]);
+// picker-view的数据
+const columnData = ref<any[][]>([]);
+// 每次队列发生变化时，保存选择的结果
+const selectValue = ref<any[]>([]);
+// 上一次列变化时的index
+const lastSelectIndex = ref<number[]>([]);
+// 列数
+const columnNum = ref(0);
+// 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+const moving = ref(false);
+// 如果用户有传递z-index值，优先使用
+const uZIndex = computed(() => (props.zIndex ? props.zIndex : 10075));
+
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: (val: boolean) => emit('update:modelValue', val)
+});
+
+watch(
+    () => props.modelValue,
+    val => {
+        if (val) setTimeout(() => init(), 10);
+    },
+    { immediate: true }
+);
+// 标识滑动开始，只有微信小程序才有这样的事件
+function pickstart() {
+    // #ifdef MP-WEIXIN
+    moving.value = true;
+    // #endif
+}
+function pickend() {
+    // #ifdef MP-WEIXIN
+    moving.value = false;
+    // #endif
+}
+
+function init() {
+    setColumnNum();
+    setDefaultSelector();
+    setColumnData();
+    setSelectValue();
+}
+
+// 获取默认选中列下标
+function setDefaultSelector() {
+    // 如果没有传入默认选中的值，生成长度为columnNum，用0填充的数组
+    defaultSelector.value = props.defaultValue.length == columnNum.value ? props.defaultValue : Array(columnNum.value).fill(0);
+    lastSelectIndex.value = [...defaultSelector.value];
+}
+// 计算列数
+function setColumnNum() {
+    // 单列的列数为1
+    if (props.mode == 'single-column') columnNum.value = 1;
+    // 多列时，this.list数组长度就是列数
+    else if (props.mode == 'mutil-column') columnNum.value = props.list.length;
+    // 多列联动时，通过历遍this.list的第一个元素，得出有多少列
+    else if (props.mode == 'mutil-column-auto') {
+        let num = 1;
+        let column: any = props.list;
+        // 只要有元素并且第一个元素有children属性，继续遍历
+        while (Array.isArray(column) && column[0] && typeof column[0] === 'object' && props.childName in column[0]) {
+            column = column[0][props.childName];
+            num++;
+        }
+        columnNum.value = num;
+    }
+}
+
+// 获取需要展示在picker中的列数据
+function setColumnData() {
+    let data: any[][] = [];
+    selectValue.value = [];
+    if (props.mode == 'mutil-column-auto') {
+        // 获得所有数据中的第一个元素
+        let column: any = props.list[defaultSelector.value.length ? defaultSelector.value[0] : 0];
+        // 通过循环所有的列数，再根据设定列的数组，得出当前需要渲染的整个列数组
+        for (let i = 0; i < columnNum.value; i++) {
+            // 第一列默认为整个list数组
+            if (i == 0) {
+                data[i] = props.list;
+                column = column && typeof column === 'object' ? column[props.childName] : [];
+            } else {
+                // 大于第一列时，判断是否有默认选中的，如果没有就用该列的第一项
+                data[i] = Array.isArray(column) ? column : [];
+                column =
+                    Array.isArray(column) && column[defaultSelector.value[i]] && typeof column[defaultSelector.value[i]] === 'object'
+                        ? column[defaultSelector.value[i]][props.childName]
+                        : [];
+            }
+        }
+    } else if (props.mode == 'single-column') {
+        data[0] = props.list;
+    } else if (props.mode == 'mutil-column') {
+        data = props.list as any[][];
+    }
+    columnData.value = data;
+}
+
+// 获取默认选中的值，如果没有设置defaultValue，就默认选中每列的第一个
+function setSelectValue() {
+    for (let i = 0; i < columnNum.value; i++) {
+        const tmp = columnData.value[i][defaultSelector.value[i]];
+        let data: any = {
+            value: tmp ? tmp[props.valueName] : null,
+            label: tmp ? tmp[props.labelName] : null
+        };
+
+        // 判断是否存在额外的参数，如果存在，就返回
+        if (tmp && tmp.extra !== undefined) data.extra = tmp.extra;
+        selectValue.value.push(data);
+    }
+}
+
+// 列选项
+function columnChange(e: any) {
+    let index: number = -1;
+    const columnIndex = e.detail.value;
+    // 由于后面是需要push进数组的，所以需要先清空数组
+    selectValue.value = [];
+    defaultSelector.value = columnIndex;
+    if (props.mode == 'mutil-column-auto') {
+        // 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
+        lastSelectIndex.value.map((val, idx) => {
+            if (val != columnIndex[idx]) index = idx;
+        });
+        for (let i = index + 1; i < columnNum.value; i++) {
+            // 当前变化列的下一列的数据，需要获取上一列的数据，同时需要指定是上一列的第几个的children，再往后的
+            // 默认是队列的第一个为默认选项
+            const prevCol = columnData.value[i - 1];
+            const prevIdx = i - 1 == index ? columnIndex[index] : 0;
+            columnData.value[i] = Array.isArray(prevCol) && prevCol[prevIdx] && typeof prevCol[prevIdx] === 'object' ? prevCol[prevIdx][props.childName] : [];
+            // 改变的列之后的所有列，默认选中第一个
+            defaultSelector.value[i] = 0;
+        }
+        // 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用
+        // 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断
+        columnIndex.map((item: any, idx: number) => {
+            let data = columnData.value[idx][columnIndex[idx]];
+            let tmp: any = {
+                value: data ? data[props.valueName] : null,
+                label: data ? data[props.labelName] : null
+            };
+            // 判断是否有需要额外携带的参数
+            if (data && data.extra !== undefined) tmp.extra = data.extra;
+            selectValue.value.push(tmp);
+        });
+        // 保存这一次的结果，用于下次列发生变化时作比较
+        lastSelectIndex.value = [...columnIndex];
+    } else if (props.mode == 'single-column') {
+        let data = columnData.value[0][columnIndex[0]];
+        // 初始默认选中值
+        let tmp: any = {
+            value: data ? data[props.valueName] : null,
+            label: data ? data[props.labelName] : null
+        };
+        // 判断是否有需要额外携带的参数
+        if (data && data.extra !== undefined) tmp.extra = data.extra;
+        selectValue.value.push(tmp);
+    } else if (props.mode == 'mutil-column') {
+        // 初始默认选中值
+        columnIndex.map((item: any, idx: number) => {
+            let data = columnData.value[idx][columnIndex[idx]];
+            // 初始默认选中值
+            let tmp: any = {
+                value: data ? data[props.valueName] : null,
+                label: data ? data[props.labelName] : null
+            };
+            // 判断是否有需要额外携带的参数
+            if (data && data.extra !== undefined) tmp.extra = data.extra;
+            selectValue.value.push(tmp);
+        });
+    }
+}
+
+function close() {
+    emit('update:modelValue', false);
+    // 重置default-value默认值
+    defaultSelector.value = [0];
+}
+// 点击确定或者取消
+function getResult(event: 'update:modelValue' | 'confirm' | 'cancel' | 'click' | null = null) {
+    // #ifdef MP-WEIXIN
+    if (moving.value) return;
+    // #endif
+
+    if (event) emit(event, selectValue.value);
+    close();
+}
+
+function selectHandler() {
+    emit('click');
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-select {
+    &__action {
+        position: relative;
+        line-height: $u-form-item-height;
+        height: $u-form-item-height;
+
+        &__icon {
+            position: absolute;
+            right: 20rpx;
+            top: 50%;
+            transition: transform 0.4s;
+            transform: translateY(-50%);
+            z-index: 1;
+
+            &--reverse {
+                transform: rotate(-180deg) translateY(50%);
+            }
+        }
+    }
+
+    &__hader {
+        &__title {
+            color: $u-content-color;
+        }
+    }
+
+    &--border {
+        border-radius: 6rpx;
+        border-radius: 4px;
+        border: 1px solid $u-form-item-border-color;
+    }
+
+    &__header {
+        @include vue-flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 80rpx;
+        padding: 0 40rpx;
+    }
+
+    &__body {
+        width: 100%;
+        height: 500rpx;
+        overflow: hidden;
+        background-color: #fff;
+
+        &__picker-view {
+            height: 100%;
+            box-sizing: border-box;
+
+            &__item {
+                @include vue-flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 32rpx;
+                color: $u-main-color;
+                padding: 0 8rpx;
+            }
+        }
+    }
+}
+</style>