uview-pro 0.0.1

package/components/u-message-input/u-message-input.vue

@@ -0,0 +1,315 @@
+<template>
+    <view class="u-char-box">
+        <view class="u-char-flex">
+            <input :disabled="props.disabledKeyboard" :value="valueModel" type="number" :focus="props.focus" :maxlength="props.maxlength" class="u-input" @input="getVal" />
+            <view v-for="(item, index) in loopCharArr" :key="index">
+                <view
+                    :class="[
+                        props.breathe && charArrLength === index ? 'u-breathe' : '',
+                        'u-char-item',
+                        charArrLength === index && props.mode == 'box' ? 'u-box-active' : '',
+                        props.mode === 'box' ? 'u-box' : ''
+                    ]"
+                    :style="{
+                        fontWeight: props.bold ? 'bold' : 'normal',
+                        fontSize: props.fontSize + 'rpx',
+                        width: props.width + 'rpx',
+                        height: props.width + 'rpx',
+                        color: props.inactiveColor,
+                        borderColor: charArrLength === index && props.mode == 'box' ? props.activeColor : props.inactiveColor
+                    }"
+                >
+                    <view
+                        class="u-placeholder-line"
+                        :style="{
+                            display: charArrLength === index ? 'block' : 'none',
+                            height: Number(props.width) * 0.5 + 'rpx'
+                        }"
+                        v-if="props.mode !== 'middleLine'"
+                    ></view>
+                    <view
+                        v-if="props.mode === 'middleLine' && charArrLength <= index"
+                        :class="[props.breathe && charArrLength === index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
+                        class="u-middle-line"
+                        :style="{
+                            height: props.bold ? '4px' : '2px',
+                            background: charArrLength === index ? props.activeColor : props.inactiveColor
+                        }"
+                    ></view>
+                    <view
+                        v-if="props.mode === 'bottomLine'"
+                        :class="[props.breathe && charArrLength === index ? 'u-breathe' : '', charArrLength === index ? 'u-bottom-line-active' : '']"
+                        class="u-bottom-line"
+                        :style="{
+                            height: props.bold ? '4px' : '2px',
+                            background: charArrLength === index ? props.activeColor : props.inactiveColor
+                        }"
+                    ></view>
+                    <block v-if="!props.dotFill"> {{ charArr[index] ? charArr[index] : '' }}</block>
+                    <block v-else>
+                        <text class="u-dot">{{ charArr[index] ? '●' : '' }}</text>
+                    </block>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+defineOptions({ name: 'u-message-input' });
+
+/**
+ * messageInput 验证码输入框
+ * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
+ * @tutorial https://www.uviewui.com/components/messageInput.html
+ * @property {String|Number} maxlength 输入字符个数（默认4）
+ * @property {Boolean} dot-fill 是否用圆点填充（默认false）
+ * @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
+ * @property {String|Number} value 预置值
+ * @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
+ * @property {Boolean} focus 是否自动获取焦点（默认false）
+ * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
+ * @property {String|Number} font-size 字体大小，单位rpx（默认60）
+ * @property {String} active-color 当前激活输入框的样式（默认#2979ff）
+ * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
+ * @property {String|Number} width 输入框宽度，单位rpx，高等于宽（默认80）
+ * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
+ * @event {Function} change 输入内容发生改变时触发，具体见官网说明
+ * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
+ * @example <u-message-input mode="bottomLine"></u-message-input>
+ */
+const props = defineProps({
+    // 最大输入长度
+    maxlength: {
+        type: [Number, String],
+        default: 4
+    },
+    // 是否用圆点填充
+    dotFill: {
+        type: Boolean,
+        default: false
+    },
+    // 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
+    mode: {
+        type: String,
+        default: 'box'
+    },
+    // 预置值
+    value: {
+        type: [String, Number],
+        default: ''
+    },
+    // 当前激活输入item，是否带有呼吸效果
+    breathe: {
+        type: Boolean,
+        default: true
+    },
+    // 是否自动获取焦点
+    focus: {
+        type: Boolean,
+        default: false
+    },
+    // 字体是否加粗
+    bold: {
+        type: Boolean,
+        default: false
+    },
+    // 字体大小
+    fontSize: {
+        type: [String, Number],
+        default: 60
+    },
+    // 激活样式
+    activeColor: {
+        type: String,
+        default: '#2979ff'
+    },
+    // 未激活的样式
+    inactiveColor: {
+        type: String,
+        default: '#606266'
+    },
+    // 输入框的大小，单位rpx，宽等于高
+    width: {
+        type: [Number, String],
+        default: '80'
+    },
+    // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+    disabledKeyboard: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['change', 'finish']);
+
+// 输入框实际值
+const valueModel = ref('');
+
+// 监听 value 变化，自动同步 valueModel，超出部分截掉
+watch(
+    () => props.value,
+    val => {
+        // 转为字符串
+        const strVal = String(val);
+        // 超出部分截掉
+        valueModel.value = strVal.substring(0, Number(props.maxlength));
+    },
+    { immediate: true }
+);
+
+// 用于显示字符
+const charArr = computed(() => valueModel.value.split(''));
+const charArrLength = computed(() => charArr.value.length);
+// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+const loopCharArr = computed(() => new Array(Number(props.maxlength)));
+
+/**
+ * 输入事件处理
+ * @param e input事件对象
+ */
+function getVal(e: { detail: { value: string } }) {
+    const { value } = e.detail;
+    valueModel.value = value;
+    // 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
+    if (String(value).length > Number(props.maxlength)) return;
+    // 未达到maxlength之前，发送change事件，达到后发送finish事件
+    emit('change', value);
+    if (String(value).length === Number(props.maxlength)) {
+        emit('finish', value);
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+@keyframes breathe {
+    0% {
+        opacity: 0.3;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0.3;
+    }
+}
+
+.u-char-box {
+    text-align: center;
+}
+
+.u-char-flex {
+    @include vue-flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.u-input {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 200%;
+    height: 100%;
+    text-align: left;
+    z-index: 9;
+    opacity: 0;
+    background: none;
+}
+
+.u-char-item {
+    position: relative;
+    width: 90rpx;
+    height: 90rpx;
+    margin: 10rpx 10rpx;
+    font-size: 60rpx;
+    font-weight: bold;
+    color: $u-main-color;
+    line-height: 90rpx;
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.u-middle-line {
+    border: none;
+}
+
+.u-box {
+    box-sizing: border-box;
+    border: 2rpx solid #cccccc;
+    border-radius: 6rpx;
+}
+
+.u-box-active {
+    overflow: hidden;
+    animation-timing-function: ease-in-out;
+    animation-duration: 1500ms;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    border: 2rpx solid $u-type-primary;
+}
+
+.u-middle-line-active {
+    background: $u-type-primary;
+}
+
+.u-breathe {
+    animation: breathe 2s infinite ease;
+}
+
+.u-placeholder-line {
+    /* #ifndef APP-NVUE */
+    display: none;
+    /* #endif */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 2rpx;
+    height: 40rpx;
+    background: #333333;
+    animation: twinkling 1.5s infinite ease;
+}
+
+.u-animation-breathe {
+    animation-name: breathe;
+}
+
+.u-dot {
+    font-size: 34rpx;
+    line-height: 34rpx;
+}
+
+.u-middle-line {
+    height: 4px;
+    background: #000000;
+    width: 80%;
+    position: absolute;
+    border-radius: 2px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.u-bottom-line-active {
+    background: $u-type-primary;
+}
+
+.u-bottom-line {
+    height: 4px;
+    background: #000000;
+    width: 80%;
+    position: absolute;
+    border-radius: 2px;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%);
+}
+</style>

package/components/u-modal/u-modal.vue

@@ -0,0 +1,284 @@
+<template>
+    <view>
+        <u-popup
+            :zoom="zoom"
+            mode="center"
+            :popup="false"
+            :z-index="uZIndex"
+            v-model="popupValue"
+            :length="width"
+            :mask-close-able="maskCloseAble"
+            :border-radius="borderRadius"
+            @close="popupClose"
+            :negative-top="negativeTop"
+        >
+            <view class="u-model">
+                <view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
+                <view class="u-model__content">
+                    <view :style="[contentStyle]" v-if="slots.default">
+                        <slot />
+                    </view>
+                    <view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
+                </view>
+                <view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
+                    <view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button" :style="[cancelBtnStyle]" @tap="cancel">
+                        {{ cancelText }}
+                    </view>
+                    <view
+                        v-if="showConfirmButton || slots['confirm-button']"
+                        :hover-stay-time="100"
+                        :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
+                        class="u-model__footer__button hairline-left"
+                        :style="[confirmBtnStyle]"
+                        @tap="confirm"
+                    >
+                        <slot v-if="slots['confirm-button']" name="confirm-button"></slot>
+                        <template v-else>
+                            <u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
+                            <template v-else>
+                                {{ confirmText }}
+                            </template>
+                        </template>
+                    </view>
+                </view>
+            </view>
+        </u-popup>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, useSlots } from 'vue';
+
+defineOptions({
+    name: 'u-modal'
+});
+
+/**
+ * modal 模态框
+ * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
+ * @tutorial https://www.uviewui.com/components/modal.html
+ * @property {Boolean} value 是否显示模态框
+ * @property {String | Number} z-index 层级
+ * @property {String} title 模态框标题（默认"提示"）
+ * @property {String | Number} width 模态框宽度（默认600）
+ * @property {String} content 模态框内容（默认"内容"）
+ * @property {Boolean} show-title 是否显示标题（默认true）
+ * @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
+ * @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
+ * @property {String | Number} negative-top modal往上偏移的值
+ * @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
+ * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
+ * @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
+ * @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
+ * @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
+ * @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"）
+ * @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
+ * @property {Object} title-style 自定义标题样式，对象形式
+ * @property {Object} content-style 自定义内容样式，对象形式
+ * @property {Object} cancel-style 自定义取消按钮样式，对象形式
+ * @property {Object} confirm-style 自定义确认按钮样式，对象形式
+ * @property {Boolean} zoom 是否开启缩放模式（默认true）
+ * @event {Function} confirm 确认按钮被点击
+ * @event {Function} cancel 取消按钮被点击
+ * @example <u-modal :src="title" :content="content"></u-modal>
+ */
+
+const props = defineProps({
+    /**
+     * 是否显示模态框
+     */
+    modelValue: { type: Boolean, default: false },
+    /**
+     * 层级z-index
+     */
+    zIndex: { type: [Number, String], default: '' },
+    /**
+     * 标题
+     */
+    title: { type: String, default: '提示' },
+    /**
+     * 弹窗宽度，可以是数值(rpx)，百分比，auto等
+     */
+    width: { type: [Number, String], default: 600 },
+    /**
+     * 弹窗内容
+     */
+    content: { type: String, default: '内容' },
+    /**
+     * 是否显示标题
+     */
+    showTitle: { type: Boolean, default: true },
+    /**
+     * 是否显示确认按钮
+     */
+    showConfirmButton: { type: Boolean, default: true },
+    /**
+     * 是否显示取消按钮
+     */
+    showCancelButton: { type: Boolean, default: false },
+    /**
+     * 确认文案
+     */
+    confirmText: { type: String, default: '确认' },
+    /**
+     * 取消文案
+     */
+    cancelText: { type: String, default: '取消' },
+    /**
+     * 确认按钮颜色
+     */
+    confirmColor: { type: String, default: '#2979ff' },
+    /**
+     * 取消文字颜色
+     */
+    cancelColor: { type: String, default: '#606266' },
+    /**
+     * 圆角值
+     */
+    borderRadius: { type: [Number, String], default: 16 },
+    /**
+     * 标题的样式
+     */
+    titleStyle: { type: Object, default: () => ({}) },
+    /**
+     * 内容的样式
+     */
+    contentStyle: { type: Object, default: () => ({}) },
+    /**
+     * 取消按钮的样式
+     */
+    cancelStyle: { type: Object, default: () => ({}) },
+    /**
+     * 确定按钮的样式
+     */
+    confirmStyle: { type: Object, default: () => ({}) },
+    /**
+     * 是否开启缩放效果
+     */
+    zoom: { type: Boolean, default: true },
+    /**
+     * 是否异步关闭，只对确定按钮有效
+     */
+    asyncClose: { type: Boolean, default: false },
+    /**
+     * 是否允许点击遮罩关闭modal
+     */
+    maskCloseAble: { type: Boolean, default: false },
+    /**
+     * 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+     */
+    negativeTop: { type: [String, Number], default: 0 }
+});
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);
+const slots = useSlots();
+
+// 确认按钮是否正在加载中
+const loading = ref(false);
+
+const cancelBtnStyle = computed(() => {
+    return Object.assign({ color: props.cancelColor }, props.cancelStyle);
+});
+const confirmBtnStyle = computed(() => {
+    return Object.assign({ color: props.confirmColor }, props.confirmStyle);
+});
+const uZIndex = computed(() => (props.zIndex ? props.zIndex : 10075));
+
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: (val: boolean) => emit('update:modelValue', val)
+});
+
+// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态，避免下次打开的时候，状态混乱
+watch(
+    () => props.modelValue,
+    n => {
+        if (n === true) loading.value = false;
+    }
+);
+
+/**
+ * 确认按钮点击事件
+ */
+function confirm() {
+    // 异步关闭
+    if (props.asyncClose) {
+        loading.value = true;
+    } else {
+        emit('update:modelValue', false);
+    }
+    emit('confirm');
+}
+
+/**
+ * 取消按钮点击事件
+ */
+function cancel() {
+    emit('cancel');
+    emit('update:modelValue', false);
+    // 目前popup弹窗关闭有一个延时操作，此处做一个延时
+    // 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+}
+
+/**
+ * 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
+ */
+function popupClose() {
+    emit('update:modelValue', false);
+}
+
+/**
+ * 清除加载中的状态
+ */
+function clearLoading() {
+    loading.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-model {
+    height: auto;
+    overflow: hidden;
+    font-size: 32rpx;
+    background-color: #fff;
+
+    &__btn--hover {
+        background-color: rgb(230, 230, 230);
+    }
+
+    &__title {
+        padding-top: 48rpx;
+        font-weight: 500;
+        text-align: center;
+        color: $u-main-color;
+    }
+
+    &__content {
+        &__message {
+            padding: 48rpx;
+            font-size: 30rpx;
+            text-align: center;
+            color: $u-content-color;
+        }
+    }
+
+    &__footer {
+        @include vue-flex;
+
+        &__button {
+            flex: 1;
+            height: 100rpx;
+            line-height: 100rpx;
+            font-size: 32rpx;
+            box-sizing: border-box;
+            cursor: pointer;
+            text-align: center;
+            border-radius: 4rpx;
+        }
+    }
+}
+</style>