uview-pro 0.0.1

package/components/u-circle-progress/u-circle-progress.vue

@@ -0,0 +1,210 @@
+<template>
+    <view
+        class="u-circle-progress"
+        :style="{
+            width: widthPx + 'px',
+            height: widthPx + 'px',
+            backgroundColor: bgColor
+        }"
+    >
+        <!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+        <canvas
+            class="u-canvas-bg"
+            type="2d"
+            :canvas-id="elBgId"
+            :id="elBgId"
+            :style="{
+                width: widthPx + 'px',
+                height: widthPx + 'px'
+            }"
+        ></canvas>
+        <canvas
+            class="u-canvas"
+            type="2d"
+            :canvas-id="elId"
+            :id="elId"
+            :style="{
+                width: widthPx + 'px',
+                height: widthPx + 'px'
+            }"
+        ></canvas>
+        <slot></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-circle-progress'
+});
+
+/**
+ * circleProgress 环形进度条
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ * @tutorial https://www.uviewui.com/components/circleProgress.html
+ * @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
+ * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
+ * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
+ * @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
+ * @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
+ * @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
+ * @property {String} type 如设置，active-color值将会失效
+ * @property {String} bg-color 整个组件背景颜色，默认为白色
+ * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
+ */
+const props = defineProps({
+    /** 圆环进度百分比值 */
+    percent: {
+        type: Number,
+        default: 0,
+        // 限制值在0到100之间
+        validator: (val: number) => val >= 0 && val <= 100
+    },
+    /** 底部圆环的颜色（灰色的圆环） */
+    inactiveColor: { type: String, default: '#ececec' },
+    /** 圆环激活部分的颜色 */
+    activeColor: { type: String, default: '#19be6b' },
+    /** 圆环线条的宽度，单位rpx */
+    borderWidth: { type: [Number, String], default: 14 },
+    /** 整个圆形的宽度，单位rpx */
+    width: { type: [Number, String], default: 200 },
+    /** 整个圆环执行一圈的时间，单位ms */
+    duration: { type: [Number, String], default: 1500 },
+    /** 主题类型 */
+    type: { type: String, default: '' },
+    /** 整个圆环进度区域的背景色 */
+    bgColor: { type: String, default: '#ffffff' }
+});
+
+let elBgId = $u.guid(); // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
+let elId = $u.guid();
+// #ifdef MP-WEIXIN
+elBgId = 'uCircleProgressBgId'; // 微信小程序中不能使用$u.guid()形式动态生成id值，否则会报错
+elId = 'uCircleProgressElId';
+// #endif
+
+const widthPx = computed(() => (typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.width)) : Number(props.width)));
+const borderWidthPx = computed(() => (typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.borderWidth)) : Number(props.borderWidth)));
+const startAngle = -Math.PI / 2; // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
+const progressContext = ref<any>(null); // 活动圆的canvas上下文
+const newPercent = ref(props.percent); // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+const oldPercent = ref(0); // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+
+/**
+ * 有type主题时，优先起作用
+ */
+const circleColor = computed(() => {
+    if (props.type && ['success', 'error', 'info', 'primary', 'warning'].includes(props.type)) {
+        return $u.color[props.type as keyof typeof $u.color] as string;
+    }
+    return props.activeColor;
+});
+
+// 监听percent变化，动态绘制进度
+watch(
+    () => props.percent,
+    (nVal, oVal = 0) => {
+        let next = nVal > 100 ? 100 : nVal;
+        let prev = oVal < 0 ? 0 : oVal;
+        newPercent.value = next;
+        oldPercent.value = prev;
+        setTimeout(() => {
+            // 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+            // 将此值减少或者新增到新的百分比值
+            drawCircleByProgress(prev);
+        }, 50);
+    }
+);
+
+onMounted(() => {
+    // 赋值，用于加载后第一个画圆使用
+    newPercent.value = props.percent;
+    oldPercent.value = 0;
+    // 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
+    setTimeout(() => {
+        drawProgressBg();
+        drawCircleByProgress(oldPercent.value);
+    }, 50);
+});
+
+/**
+ * 绘制底部灰色圆环
+ */
+function drawProgressBg() {
+    const ctx = uni.createCanvasContext(elBgId);
+
+    ctx.setLineWidth(borderWidthPx.value); // 设置圆环宽度
+    ctx.setStrokeStyle(props.inactiveColor); // 线条颜色
+    ctx.beginPath(); // 开始描绘路径
+    const radius = widthPx.value / 2; // 设置一个原点(110,110)，半径为100的圆的路径到当前路径
+    ctx.arc(radius, radius, radius - borderWidthPx.value, 0, 2 * Math.PI, false);
+    ctx.stroke(); // 对路径进行描绘
+    ctx.draw();
+}
+
+/**
+ * 绘制进度圆环
+ * @param progress 当前进度
+ */
+function drawCircleByProgress(progress: number) {
+    // 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
+    let ctx = progressContext.value;
+    if (!ctx) {
+        ctx = uni.createCanvasContext(elId);
+        progressContext.value = ctx;
+    }
+    // 表示进度的两端为圆形
+    ctx.setLineCap('round');
+    // 设置线条的宽度和颜色
+    ctx.setLineWidth(borderWidthPx.value);
+    ctx.setStrokeStyle(circleColor.value);
+    // 将总过渡时间除以100，得出每修改百分之一进度所需的时间
+    let time = Math.floor(Number(props.duration) / 100);
+    // 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
+    // 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值
+    let endAngle = ((2 * Math.PI) / 100) * progress + startAngle;
+    ctx.beginPath();
+    // 半径为整个canvas宽度的一半
+    let radius = widthPx.value / 2;
+    ctx.arc(radius, radius, radius - borderWidthPx.value, startAngle, endAngle, false);
+    ctx.stroke();
+    ctx.draw();
+    // 如果变更后新值大于旧值，意味着增大了百分比
+    if (newPercent.value > oldPercent.value) {
+        // 每次递增百分之一
+        progress++;
+        // 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+        if (progress > newPercent.value) return;
+    } else {
+        // 同理于上面
+        progress--;
+        if (progress < newPercent.value) return;
+    }
+    setTimeout(() => {
+        // 定时器，每次操作间隔为time值，为了让进度条有动画效果
+        drawCircleByProgress(progress);
+    }, time);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+.u-circle-progress {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+}
+
+.u-canvas-bg {
+    position: absolute;
+}
+
+.u-canvas {
+    position: absolute;
+}
+</style>

package/components/u-col/u-col.vue

@@ -0,0 +1,135 @@
+<template>
+    <view class="u-col" :class="['u-col-' + span]" :style="colStyle" @tap="onClick">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+defineOptions({
+    name: 'u-col'
+});
+
+/**
+ * col 布局单元格
+ * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+ * @tutorial https://www.uviewui.com/components/layout.html
+ * @property {String|Number} span 栅格占据的列数，总12等分（默认0）
+ * @property {String} text-align 文字水平对齐方式（默认left）
+ * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+ * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
+ */
+
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+const props = defineProps({
+    /** 占父容器宽度的多少等分，总分为12份 */
+    span: { type: [Number, String], default: 12 },
+    /** 指定栅格左侧的间隔数(总12栏) */
+    offset: { type: [Number, String], default: 0 },
+    /** 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) */
+    justify: { type: String, default: 'start' },
+    /** 垂直对齐方式，可选值为top、center、bottom */
+    align: { type: String, default: 'center' },
+    /** 文字对齐方式 */
+    textAlign: { type: String, default: 'left' },
+    /** 是否阻止事件传播 */
+    stop: { type: Boolean, default: true }
+});
+
+/**
+ * gutter 给col添加间距，左右边距各占一半，从父组件u-row获取
+ */
+const gutter = inject('u-row-gutter', 20);
+
+/**
+ * 计算水平排列方式
+ * @returns {string}
+ */
+const uJustify = computed(() => {
+    if (props.justify === 'end' || props.justify === 'start') return 'flex-' + props.justify;
+    else if (props.justify === 'around' || props.justify === 'between') return 'space-' + props.justify;
+    else return props.justify;
+});
+
+/**
+ * 计算垂直对齐方式
+ * @returns {string}
+ */
+const uAlignItem = computed(() => {
+    if (props.align === 'top') return 'flex-start';
+    if (props.align === 'bottom') return 'flex-end';
+    else return props.align;
+});
+
+/**
+ * 计算样式对象
+ */
+const colStyle = computed<any>(() => ({
+    padding: `0 ${Number(gutter) / 2}rpx`,
+    marginLeft: `${(100 / 12) * Number(props.offset)}%`,
+    flex: `0 0 ${(100 / 12) * Number(props.span)}%`,
+    alignItems: uAlignItem.value,
+    justifyContent: uJustify.value,
+    textAlign: props.textAlign
+}));
+
+/**
+ * 点击事件
+ * @param e 事件对象
+ */
+function onClick(e: Event) {
+    emit('click');
+}
+</script>
+
+<style lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-col {
+    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    float: left;
+    /* #endif */
+}
+
+.u-col-0 {
+    width: 0;
+}
+.u-col-1 {
+    width: calc(100% / 12);
+}
+.u-col-2 {
+    width: calc(100% / 12 * 2);
+}
+.u-col-3 {
+    width: calc(100% / 12 * 3);
+}
+.u-col-4 {
+    width: calc(100% / 12 * 4);
+}
+.u-col-5 {
+    width: calc(100% / 12 * 5);
+}
+.u-col-6 {
+    width: calc(100% / 12 * 6);
+}
+.u-col-7 {
+    width: calc(100% / 12 * 7);
+}
+.u-col-8 {
+    width: calc(100% / 12 * 8);
+}
+.u-col-9 {
+    width: calc(100% / 12 * 9);
+}
+.u-col-10 {
+    width: calc(100% / 12 * 10);
+}
+.u-col-11 {
+    width: calc(100% / 12 * 11);
+}
+.u-col-12 {
+    width: calc(100% / 12 * 12);
+}
+</style>

package/components/u-collapse/u-collapse.vue

@@ -0,0 +1,82 @@
+<template>
+    <view class="u-collapse">
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, provide } from 'vue';
+
+defineOptions({
+    name: 'u-collapse'
+});
+
+/**
+ * collapse 手风琴
+ * @description 通过折叠面板收纳内容区域
+ * @tutorial https://www.uviewui.com/components/collapse.html
+ * @property {Boolean} accordion 是否手风琴模式（默认true）
+ * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
+ * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
+ * @property {Object} head-style 标题自定义样式，对象形式
+ * @property {Object} body-style 主体自定义样式，对象形式
+ * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
+ * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
+ * @example <u-collapse></u-collapse>
+ */
+const props = defineProps({
+    /** 是否手风琴模式 */
+    accordion: { type: Boolean, default: true },
+    /** 头部的样式 */
+    headStyle: { type: Object, default: () => ({}) },
+    /** 主体的样式 */
+    bodyStyle: { type: Object, default: () => ({}) },
+    /** 每一个item的样式 */
+    itemStyle: { type: Object, default: () => ({}) },
+    /** 是否显示右侧的箭头 */
+    arrow: { type: Boolean, default: true },
+    /** 箭头的颜色 */
+    arrowColor: { type: String, default: '#909399' },
+    /** 标题部分按压时的样式类，"none"为无效果 */
+    hoverClass: { type: String, default: 'u-hover-class' }
+});
+
+const emit = defineEmits(['change']);
+
+// 子元素集合
+const childrens = ref<any[]>([]);
+
+/**
+ * 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
+ */
+function init() {
+    childrens.value.forEach((vm, index) => {
+        vm.init && vm.init();
+    });
+}
+
+/**
+ * collapse item被点击，由collapse item调用父组件方法
+ */
+function onChange(index: string | number) {
+    emit('change', index);
+}
+
+provide('u-collapse', {
+    childrens,
+    props,
+    init,
+    onChange
+});
+
+defineExpose({
+    props,
+    childrens,
+    init,
+    onChange
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+</style>

package/components/u-collapse-item/u-collapse-item.vue

@@ -0,0 +1,190 @@
+<template>
+    <view class="u-collapse-item" :style="itemStyle">
+        <view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="headStyle">
+            <template v-if="!slots['title-all']">
+                <view v-if="!slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' }, isShow && activeStyle && !arrow ? activeStyle : '']">
+                    {{ title }}
+                </view>
+                <slot v-else name="title" />
+                <view class="u-icon-wrap">
+                    <u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }" class="u-arrow-down-icon" name="arrow-down"></u-icon>
+                </view>
+            </template>
+            <slot v-else name="title-all" />
+        </view>
+        <view class="u-collapse-body" :style="{ height: isShow ? height + 'px' : '0' }">
+            <view class="u-collapse-content" :id="elId" :style="bodyStyle">
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, inject } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-collapse-item'
+});
+
+/**
+ * collapseItem 手风琴Item
+ * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
+ * @tutorial https://www.uviewui.com/components/collapse.html
+ * @property {String} title 面板标题
+ * @property {String Number} index 主要用于事件的回调，标识那个Item被点击
+ * @property {Boolean} disabled 面板是否可以打开或收起（默认false）
+ * @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
+ * @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
+ * @property {String} align 标题的对齐方式（默认left）
+ * @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
+ * @event {Function} change 某个item被打开或者收起时触发
+ * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
+ */
+const props = defineProps({
+    /** 标题 */
+    title: { type: String, default: '' },
+    /** 标题的对齐方式 */
+    align: { type: String, default: 'left' },
+    /** 是否可以点击收起 */
+    disabled: { type: Boolean, default: false },
+    /** collapse显示与否 */
+    open: { type: Boolean, default: false },
+    /** 唯一标识符 */
+    name: { type: [Number, String], default: '' },
+    /** 活动样式 */
+    activeStyle: { type: Object, default: () => ({}) },
+    /** 标识当前为第几个 */
+    index: { type: [String, Number], default: '' }
+});
+
+const emit = defineEmits(['change']);
+const slots = useSlots();
+const instance = getCurrentInstance();
+
+const isShow = ref(false);
+const elId = ref('');
+const height = ref(0); // body内容的高度
+const headStyle = ref<Record<string, any>>({}); // 头部样式，对象形式
+const bodyStyle = ref<Record<string, any>>({}); // 主体部分样式
+const itemStyle = ref<Record<string, any>>({}); // 每个item的整体样式
+const arrowColor = ref(''); // 箭头的颜色
+const hoverClass = ref(''); // 头部按下时的效果样式类
+const arrow = ref(true); // 是否显示右侧箭头
+// let parent: any = null
+const parent = inject<any>('u-collapse', null);
+// 监听 open 属性变化
+watch(
+    () => props.open,
+    val => {
+        isShow.value = val;
+    }
+);
+
+/**
+ * 异步获取内容，或者动态修改了内容时，需要重新初始化
+ */
+function init() {
+    if (parent) {
+        // 不存在时才添加本实例
+        if (!parent.childrens.value.includes(instance?.proxy)) parent.childrens.value.push(instance?.proxy);
+        headStyle.value = parent.props.headStyle;
+        bodyStyle.value = parent.props.bodyStyle;
+        arrowColor.value = parent.props.arrowColor;
+        hoverClass.value = parent.props.hoverClass;
+        arrow.value = parent.props.arrow;
+        itemStyle.value = parent.props.itemStyle;
+    }
+    elId.value = $u.guid();
+    nextTick(() => {
+        queryRect();
+    });
+}
+
+/**
+ * 点击collapsehead头部
+ */
+function headClick() {
+    if (props.disabled) return;
+    isShow.value = !isShow.value;
+    // 触发本组件的事件
+    emit('change', {
+        index: props.index,
+        show: isShow.value
+    });
+    // 只有在打开时才发出事件
+    if (isShow.value) parent && parent.onChange && parent.onChange(props.index);
+}
+
+/**
+ * 查询内容高度
+ */
+function queryRect() {
+    // getRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
+    // 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
+    $u.getRect('#' + elId.value, instance).then((res: any) => {
+        height.value = res.height;
+    });
+}
+
+onMounted(() => {
+    init();
+});
+defineExpose({
+    init,
+    isShow,
+    elId,
+    height,
+    headStyle,
+    bodyStyle,
+    itemStyle,
+    arrowColor,
+    hoverClass,
+    arrow
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-collapse-head {
+    position: relative;
+    @include vue-flex;
+    justify-content: space-between;
+    align-items: center;
+    color: $u-main-color;
+    font-size: 30rpx;
+    line-height: 1;
+    padding: 24rpx 0;
+    text-align: left;
+}
+
+.u-collapse-title {
+    flex: 1;
+    overflow: hidden;
+}
+
+.u-arrow-down-icon {
+    transition: all 0.3s;
+    margin-right: 20rpx;
+    margin-left: 14rpx;
+}
+
+.u-arrow-down-icon-active {
+    transform: rotate(180deg);
+    transform-origin: center center;
+}
+
+.u-collapse-body {
+    overflow: hidden;
+    transition: all 0.3s;
+}
+
+.u-collapse-content {
+    overflow: hidden;
+    font-size: 28rpx;
+    color: $u-tips-color;
+    text-align: left;
+}
+</style>