uview-pro 0.0.1

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

@@ -0,0 +1,116 @@
+<template>
+    <view class="u-radio-group u-clearfix">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, watch, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-radio-group'
+});
+
+/**
+ * radioGroup 单选框父组件
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用
+ * @tutorial https://www.uviewui.com/components/radio.html
+ * @property {Boolean} disabled 是否禁用所有radio（默认false）
+ * @property {String|Number} size 组件整体的大小，单位rpx（默认40）
+ * @property {String} active-color 选中时的颜色，应用到所有子Radio组件（默认#2979ff）
+ * @property {String|Number} icon-size 图标大小，单位rpx（默认20）
+ * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
+ * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
+ * @property {String|Number} width 宽度，需带单位
+ * @property {Boolean} wrap 是否每个radio都换行（默认false）
+ * @event {Function} change 任一个radio状态发生变化时触发
+ * @example <u-radio-group v-model="value"></u-radio-group>
+ */
+
+const props = defineProps({
+    /** 是否禁用所有单选框 */
+    disabled: { type: Boolean, default: false },
+    /** 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 */
+    modelValue: { type: [String, Number], default: '' },
+    /** 选中状态下的颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 组件的整体大小 */
+    size: { type: [String, Number], default: 34 },
+    /** 是否禁止点击提示语选中复选框 */
+    labelDisabled: { type: Boolean, default: false },
+    /** 形状，square为方形，circle为原型 */
+    shape: { type: String, default: 'circle' },
+    /** 图标的大小，单位rpx */
+    iconSize: { type: [String, Number], default: 20 },
+    /** 每个checkbox占u-checkbox-group的宽度 */
+    width: { type: [String, Number], default: 'auto' },
+    /** 是否每个checkbox都换行 */
+    wrap: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 当前所有子 radio 实例
+const children = ref<any[]>([]);
+
+/**
+ * 父组件数据，供子组件 inject 使用
+ */
+function getData() {
+    return {
+        iconSize: props.iconSize,
+        labelDisabled: props.labelDisabled,
+        disabled: props.disabled,
+        shape: props.shape,
+        activeColor: props.activeColor,
+        size: props.size,
+        width: props.width,
+        wrap: props.wrap,
+        value: props.modelValue
+    };
+}
+
+/**
+ * 设置选中值
+ * @param val 选中的 radio 的 name
+ */
+function setValue(val: string | number) {
+    // 通过emit事件，设置父组件通过v-model双向绑定的值
+    emit('update:modelValue', val);
+    emit('change', val);
+    // 等待下一个周期再执行，因为emit作用于父组件，再反馈到子组件内部，需要时间
+    // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+    setTimeout(() => {
+        // 将当前的值发送到 u-form-item 进行校验
+        $u.dispatch(getCurrentInstance(), 'u-form-item', 'on-form-change', val);
+    }, 60);
+}
+
+// provide 父组件数据和方法，供子组件使用
+provide('u-radio-group', {
+    getData,
+    setValue
+});
+
+// 监听 props 变化，通知子组件刷新
+watch(
+    () => [props.modelValue, props.disabled, props.activeColor, props.size, props.labelDisabled, props.shape, props.iconSize, props.width, props.wrap],
+    () => {
+        // 这里可通过事件或响应式通知子组件刷新
+        // 兼容性处理，子组件可通过 inject 的 getData 获取最新值
+        console.log('u-radio-group 监听到属性变化');
+    }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-radio-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+}
+</style>

package/components/u-rate/u-rate.vue

@@ -0,0 +1,349 @@
+<template>
+    <view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
+        <view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
+            <u-icon
+                :name="activeIndex > index ? elActiveIcon : inactiveIcon"
+                @click="click(index + 1, $event)"
+                :color="activeIndex > index ? elActiveColor : inactiveColor"
+                :custom-style="{
+                    fontSize: size + 'rpx',
+                    padding: `0 ${Number(gutter) / 2 + 'rpx'}`
+                }"
+                :custom-prefix="customPrefix"
+                :show-decimal-icon="showDecimalIcon(index)"
+                :percent="decimal"
+                :inactive-color="inactiveColor"
+            ></u-icon>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-rate'
+});
+
+/**
+ * rate 评分
+ * @description 该组件一般用于满意度调查，星型评分的场景
+ * @tutorial https://www.uviewui.com/components/rate.html
+ * @property {String|Number} count 最多可选的星星数量（默认5）
+ * @property {String|Number} current 默认选中的星星数量（默认0）
+ * @property {Boolean} disabled 是否禁止用户操作（默认false）
+ * @property {String|Number} size 星星的大小，单位rpx（默认32）
+ * @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2）
+ * @property {String} active-color 选中的星星颜色（默认#FA3534）
+ * @property {String} active-icon 选中时的图标名，只能为uView的内置图标（默认star-fill）
+ * @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star）
+ * @property {String|Number} gutter 星星之间的距离（默认10）
+ * @property {String|Number} min-count 最少选中星星的个数（默认0）
+ * @property {Boolean} allow-half 是否允许半星选择（默认false）
+ * @event {Function} change 选中的星星发生变化时触发
+ * @example <u-rate :count="count" :current="2"></u-rate>
+ */
+const props = defineProps({
+    /**
+     * 用于v-model双向绑定选中的星星数量
+     * 1.4.5版新增
+     * @default -1
+     */
+    modelValue: {
+        type: [Number, String],
+        default: -1
+    },
+    /**
+     * 要显示的星星数量
+     * @default 5
+     */
+    count: {
+        type: [Number, String],
+        default: 5
+    },
+    /**
+     * 当前需要默认选中的星星(选中的个数)
+     * 1.4.5后通过value双向绑定，不再建议使用此参数
+     * @default 0
+     */
+    current: {
+        type: [Number, String],
+        default: 0
+    },
+    /**
+     * 是否不可选中
+     * @default false
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 星星的大小，单位rpx
+     * @default 32
+     */
+    size: {
+        type: [Number, String],
+        default: 32
+    },
+    /**
+     * 未选中时的颜色
+     * @default '#b2b2b2'
+     */
+    inactiveColor: {
+        type: String,
+        default: '#b2b2b2'
+    },
+    /**
+     * 选中的颜色
+     * @default '#FA3534'
+     */
+    activeColor: {
+        type: String,
+        default: '#FA3534'
+    },
+    /**
+     * 星星之间的间距，单位rpx
+     * @default 10
+     */
+    gutter: {
+        type: [Number, String],
+        default: 10
+    },
+    /**
+     * 最少能选择的星星个数
+     * @default 0
+     */
+    minCount: {
+        type: [Number, String],
+        default: 0
+    },
+    /**
+     * 是否允许半星(功能尚未实现)
+     * @default false
+     */
+    allowHalf: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 选中时的图标(星星)
+     * @default 'star-fill'
+     */
+    activeIcon: {
+        type: String,
+        default: 'star-fill'
+    },
+    /**
+     * 未选中时的图标(星星)
+     * @default 'star'
+     */
+    inactiveIcon: {
+        type: String,
+        default: 'star'
+    },
+    /**
+     * 自定义扩展前缀，方便用户扩展自己的图标库
+     * @default 'uicon'
+     */
+    customPrefix: {
+        type: String,
+        default: 'uicon'
+    },
+    /**
+     * 分段颜色
+     * @default []
+     */
+    colors: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     * 分段图标
+     * @default []
+     */
+    icons: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const instance = getCurrentInstance();
+// 生成唯一id，防止页面多个评分组件冲突
+const elId = ref($u.guid());
+const elClass = ref($u.guid());
+const starBoxLeft = ref(0); // 评分盒子左边到屏幕左边的距离
+const starWidth = ref(0); // 每个星星的宽度
+const starWidthArr = ref<number[]>([]); //每个星星最右边到组件盒子最左边的距离
+// 当前激活的星星的index，如果存在value，优先使用value，因为它可以双向绑定(1.4.5新增)
+const activeIndex = ref(Number(props.modelValue) !== -1 ? Number(props.modelValue) : Number(props.current));
+
+// 监听props变化，保持activeIndex同步
+watch(
+    () => props.current,
+    val => {
+        activeIndex.value = Number(val);
+    }
+);
+watch(
+    () => props.modelValue,
+    val => {
+        activeIndex.value = Number(val);
+    }
+);
+
+/**
+ * 计算当前星星的显示小数部分（半星）
+ */
+const decimal = computed(() => {
+    if (props.disabled) {
+        return (Number(activeIndex.value) * 100) % 100;
+    } else if (props.allowHalf) {
+        return 50;
+    }
+    return 0;
+});
+/**
+ * 计算当前激活的图标
+ */
+const elActiveIcon = computed(() => {
+    const len = props.icons.length;
+    // 此处规则类似于下方的elActiveColor参数，都是根据一定的规则，显示不同的图标
+    // 结果可能如此：icons参数传递了3个图标，当选中两个时，用第一个图标，4个时，用第二个图标
+    // 第三个时，用第三个图标作为激活的图标
+    if (len && len <= Number(props.count)) {
+        const step = Math.round(Number(activeIndex.value) / Math.round(Number(props.count) / len));
+        if (step < 1) return props.icons[0];
+        if (step > len) return props.icons[len - 1];
+        return props.icons[step - 1];
+    }
+    return props.activeIcon;
+});
+/**
+ * 计算当前激活的颜色
+ */
+const elActiveColor = computed(() => {
+    const len = props.colors.length;
+    // 如果有设置colors参数(此参数用于将图标分段，比如一共5颗星，colors传3个颜色值，那么根据一定的规则，2颗星可能为第一个颜色
+    // 4颗星为第二个颜色值，5颗星为第三个颜色值)
+    if (len && len <= Number(props.count)) {
+        const step = Math.round(Number(activeIndex.value) / Math.round(Number(props.count) / len));
+        if (step < 1) return props.colors[0];
+        if (step > len) return props.colors[len - 1];
+        return props.colors[step - 1];
+    }
+    return props.activeColor;
+});
+
+/**
+ * 获取评分组件盒子的布局信息
+ */
+function getElRectById() {
+    // uView封装的获取节点的方法，详见文档
+    $u.getRect('#' + elId.value, instance).then((res: any) => {
+        starBoxLeft.value = res.left;
+    });
+}
+/**
+ * 获取单个星星的尺寸
+ */
+function getElRectByClass() {
+    // uView封装的获取节点的方法，详见文档
+    $u.getRect('.' + elClass.value, instance).then((res: any) => {
+        starWidth.value = res.width;
+        // 把每个星星右边到组件盒子左边的距离放入数组中
+        for (let i = 0; i < Number(props.count); i++) {
+            starWidthArr.value[i] = (i + 1) * starWidth.value;
+        }
+    });
+}
+/**
+ * 手指滑动评分
+ */
+function touchMove(e: any) {
+    if (props.disabled) {
+        return;
+    }
+    if (!e.changedTouches[0]) {
+        return;
+    }
+    const movePageX = e.changedTouches[0].pageX;
+    // 滑动点相对于评分盒子左边的距离
+    const distance = movePageX - starBoxLeft.value;
+    // 如果滑动到了评分盒子的左边界，就设置为0星
+    if (distance <= 0) {
+        activeIndex.value = 0;
+    }
+    // 滑动的距离，相当于多少颗星星
+    let index = Math.ceil(distance / starWidth.value);
+    activeIndex.value = index > Number(props.count) ? Number(props.count) : index;
+    // 对最少颗星星的限制
+    if (activeIndex.value < Number(props.minCount)) activeIndex.value = Number(props.minCount);
+    emitEvent();
+}
+/**
+ * 通过点击，直接选中
+ */
+function click(index: number, e: any) {
+    if (props.disabled) {
+        return;
+    }
+    // 半星选择，尚未实现
+    if (props.allowHalf) {
+        // 预留半星实现
+    }
+    // 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
+    if (index == 1) {
+        if (activeIndex.value == 1) {
+            activeIndex.value = 0;
+        } else {
+            activeIndex.value = 1;
+        }
+    } else {
+        activeIndex.value = index;
+    }
+    // 对最少颗星星的限制
+    if (activeIndex.value < Number(props.minCount)) activeIndex.value = Number(props.minCount);
+    emitEvent();
+}
+/**
+ * 发出事件
+ */
+function emitEvent() {
+    // 发出change事件
+    emit('change', activeIndex.value);
+    // 同时修改双向绑定的value的值
+    if (Number(props.modelValue) !== -1) {
+        emit('update:modelValue', activeIndex.value);
+    }
+}
+/**
+ * 是否显示半星图标
+ */
+function showDecimalIcon(index: number) {
+    return props.disabled && parseInt(String(activeIndex.value)) === index;
+}
+
+onMounted(() => {
+    getElRectById();
+    getElRectByClass();
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-rate {
+    display: -webkit-inline-flex;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+}
+
+.u-icon {
+    box-sizing: border-box;
+}
+</style>

package/components/u-read-more/u-read-more.vue

@@ -0,0 +1,199 @@
+<template>
+    <view class="">
+        <view
+            class="u-content"
+            :class="[elId]"
+            :style="{
+                height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
+                textIndent: textIndent
+            }"
+        >
+            <slot></slot>
+        </view>
+        <view @tap="toggleReadMore" v-if="isLongContent" class="u-content__showmore-wrap" :class="{ 'u-content__show-more': showMore }" :style="[innerShadowStyle]">
+            <text
+                class="u-content__showmore-wrap__readmore-btn"
+                :style="{
+                    fontSize: fontSize + 'rpx',
+                    color: color
+                }"
+            >
+                {{ showMore ? openText : closeText }}
+            </text>
+            <view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
+                <u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-read-more' });
+
+/**
+ * readMore 阅读更多
+ * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+ * @tutorial https://www.uviewui.com/components/readMore.html
+ * @property {String|Number} showHeight 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
+ * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
+ * @property {String} closeText 关闭时的提示文字（默认“展开阅读全文”）
+ * @property {String|Number} fontSize 提示文字的大小，单位rpx（默认28）
+ * @property {String} textIndent 段落首行缩进的字符个数（默认2em）
+ * @property {String} openText 展开时的提示文字（默认“收起”）
+ * @property {String} color 提示文字的颜色（默认#2979ff）
+ * @property {Object} shadowStyle 是否显示阴影，样式对象
+ * @property {String|Number} index open和close事件时，将此参数返回在回调参数中
+ * @event open 展开时触发
+ * @event close 收起时触发
+ * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
+ */
+
+const props = defineProps({
+    /** 默认的显示占位高度，单位为rpx */
+    showHeight: {
+        type: [Number, String],
+        default: 400
+    },
+    /** 展开后是否显示"收起"按钮 */
+    toggle: {
+        type: Boolean,
+        default: false
+    },
+    /** 关闭时的提示文字 */
+    closeText: {
+        type: String,
+        default: '展开阅读全文'
+    },
+    /** 展开时的提示文字 */
+    openText: {
+        type: String,
+        default: '收起'
+    },
+    /** 提示的文字颜色 */
+    color: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 提示文字的大小 */
+    fontSize: {
+        type: [String, Number],
+        default: 28
+    },
+    /** 是否显示阴影 */
+    shadowStyle: {
+        type: Object as () => Record<string, any>,
+        default: () => ({
+            backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
+            paddingTop: '300rpx',
+            marginTop: '-300rpx'
+        })
+    },
+    /** 段落首行缩进的字符个数 */
+    textIndent: {
+        type: String,
+        default: '2em'
+    },
+    /** open和close事件时，将此参数返回在回调参数中 */
+    index: {
+        type: [Number, String],
+        default: ''
+    }
+});
+
+const emit = defineEmits(['open', 'close']);
+
+// 是否需要隐藏一部分内容
+const isLongContent = ref(false);
+// 当前隐藏与显示的状态，true-显示，false-收起
+const showMore = ref(false);
+// 生成唯一class
+const elId = ref('');
+const instance = getCurrentInstance();
+
+// 展开后无需阴影，收起时才需要阴影样式
+const innerShadowStyle = computed(() => {
+    return showMore.value ? {} : props.shadowStyle;
+});
+
+// 监听 toggle 和 showHeight 变化，重新初始化
+watch(
+    () => `${props.toggle}-${props.showHeight}`,
+    () => {
+        init();
+    }
+);
+
+onMounted(() => {
+    elId.value = $u.guid();
+    nextTick(() => {
+        init();
+    });
+});
+
+/**
+ * 初始化内容高度判断
+ * @description 判断内容是否超出指定高度，决定是否显示展开/收起按钮
+ */
+function init() {
+    $u.getRect('.' + elId.value, instance).then((res: { height: number }) => {
+        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+        if (res.height > uni.upx2px(Number(props.showHeight))) {
+            isLongContent.value = true;
+            showMore.value = false;
+        }
+    });
+}
+
+/**
+ * 展开或者收起内容
+ * @description 切换显示状态，发出 open/close 事件
+ */
+function toggleReadMore() {
+    showMore.value = !showMore.value;
+    // 如果toggle为false，隐藏"收起"部分的内容
+    if (props.toggle == false) isLongContent.value = false;
+    // 发出打开或者收齐的事件
+    emit(showMore.value ? 'open' : 'close', props.index);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-content {
+    font-size: 30rpx;
+    color: $u-content-color;
+    line-height: 1.8;
+    text-align: left;
+    overflow: hidden;
+
+    &__show-more {
+        padding-top: 0;
+        background: none;
+        margin-top: 20rpx;
+    }
+
+    &__showmore-wrap {
+        position: relative;
+        width: 100%;
+        padding-bottom: 26rpx;
+        @include vue-flex;
+        align-items: center;
+        justify-content: center;
+
+        &__readmore-btn {
+            @include vue-flex;
+            align-items: center;
+            justify-content: center;
+            line-height: 1;
+
+            &__icon {
+                margin-left: 14rpx;
+            }
+        }
+    }
+}
+</style>