uview-pro 0.0.14 → 0.0.16

package/components/u-mask/u-mask.vue

@@ -1,106 +1,106 @@
-<template>
-    <view
-        class="u-mask"
-        hover-stop-propagation
-        :style="[maskStyle, zoomStyle]"
-        @tap="click"
-        @touchmove.stop.prevent="() => {}"
-        :class="{
-            'u-mask-zoom': props.zoom,
-            'u-mask-show': props.show
-        }"
-    >
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { $u } from '../..';
-import { MaskProps } from './types';
-
-defineOptions({ name: 'u-mask' });
-
-/**
- * mask 遮罩
- * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
- * @tutorial https://uview-pro.netlify.app/components/mask.html
- * @property {Boolean} show 是否显示遮罩（默认false）
- * @property {String|Number} z-index z-index 层级（默认1070）
- * @property {Object} custom-style 自定义样式对象，见上方说明
- * @property {String|Number} duration 动画时长，单位毫秒（默认300）
- * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
- * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
- * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
- * @example <u-mask :show="show" @click="show = false"></u-mask>
- */
-const props = defineProps(MaskProps);
-const emit = defineEmits(['click']);
-
-// 缩放动画样式
-const zoomStyle = ref<{ transform: string }>({ transform: '' });
-// scale值
-const scale = 'scale(1.2, 1.2)';
-
-// 监听遮罩显示状态，动态设置缩放动画
-watch(
-    () => props.show,
-    n => {
-        if (n && props.zoom) {
-            // 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
-            zoomStyle.value.transform = 'scale(1, 1)';
-        } else if (!n && props.zoom) {
-            // 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
-            zoomStyle.value.transform = scale;
-        }
-    }
-);
-
-// 遮罩样式
-const maskStyle = computed(() => {
-    let style: Record<string, any> = {};
-    style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
-    if (props.show) style.zIndex = props.zIndex ? props.zIndex : $u.zIndex.mask;
-    else style.zIndex = -1;
-    style.transition = `all ${Number(props.duration) / 1000}s ease-in-out`;
-    // 判断用户传递的对象是否为空，不为空就进行合并
-    if (props.customStyle && Object.keys(props.customStyle).length) {
-        style = {
-            ...style,
-            ...props.customStyle
-        };
-    }
-    return style;
-});
-
-/**
- * 遮罩点击事件
- * maskClickAble为true时，点击遮罩发送click事件
- */
-function click() {
-    if (!props.maskClickAble) return;
-    emit('click');
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    transition: transform 0.3s;
-}
-
-.u-mask-show {
-    opacity: 1;
-}
-
-.u-mask-zoom {
-    transform: scale(1.2, 1.2);
-}
-</style>
+<template>
+    <view
+        class="u-mask"
+        hover-stop-propagation
+        :style="[maskStyle, zoomStyle]"
+        @tap="click"
+        @touchmove.stop.prevent="() => {}"
+        :class="{
+            'u-mask-zoom': props.zoom,
+            'u-mask-show': props.show
+        }"
+    >
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { $u } from '../..';
+import { MaskProps } from './types';
+
+defineOptions({ name: 'u-mask' });
+
+/**
+ * mask 遮罩
+ * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+ * @tutorial https://uview-pro.netlify.app/components/mask.html
+ * @property {Boolean} show 是否显示遮罩（默认false）
+ * @property {String|Number} z-index z-index 层级（默认1070）
+ * @property {Object} custom-style 自定义样式对象，见上方说明
+ * @property {String|Number} duration 动画时长，单位毫秒（默认300）
+ * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
+ * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
+ * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
+ * @example <u-mask :show="show" @click="show = false"></u-mask>
+ */
+const props = defineProps(MaskProps);
+const emit = defineEmits(['click']);
+
+// 缩放动画样式
+const zoomStyle = ref<{ transform: string }>({ transform: '' });
+// scale值
+const scale = 'scale(1.2, 1.2)';
+
+// 监听遮罩显示状态，动态设置缩放动画
+watch(
+    () => props.show,
+    n => {
+        if (n && props.zoom) {
+            // 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
+            zoomStyle.value.transform = 'scale(1, 1)';
+        } else if (!n && props.zoom) {
+            // 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
+            zoomStyle.value.transform = scale;
+        }
+    }
+);
+
+// 遮罩样式
+const maskStyle = computed(() => {
+    let style: Record<string, any> = {};
+    style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+    if (props.show) style.zIndex = props.zIndex ? props.zIndex : $u.zIndex.mask;
+    else style.zIndex = -1;
+    style.transition = `all ${Number(props.duration) / 1000}s ease-in-out`;
+    // 判断用户传递的对象是否为空，不为空就进行合并
+    if (props.customStyle && Object.keys(props.customStyle).length) {
+        style = {
+            ...style,
+            ...props.customStyle
+        };
+    }
+    return style;
+});
+
+/**
+ * 遮罩点击事件
+ * maskClickAble为true时，点击遮罩发送click事件
+ */
+function click() {
+    if (!props.maskClickAble) return;
+    emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: transform 0.3s;
+}
+
+.u-mask-show {
+    opacity: 1;
+}
+
+.u-mask-zoom {
+    transform: scale(1.2, 1.2);
+}
+</style>

package/components/u-message-input/types.ts

@@ -1,74 +1,74 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { MessageInputMode } from '../../types/global';
-
-/**
- * u-message-input 组件 props 类型定义
- * @description 验证码/短信输入框，支持多种样式
- */
-export const MessageInputProps = {
-    /** 最大输入长度 */
-    maxlength: {
-        type: [Number, String] as PropType<number | string>,
-        default: 4
-    },
-    /** 是否用圆点填充 */
-    dotFill: {
-        type: Boolean,
-        default: false
-    },
-    /** 显示模式，box-盒子，bottomLine-底部横线，middleLine-中部横线 */
-    mode: {
-        type: String as PropType<MessageInputMode>,
-        default: 'box'
-    },
-    /** 预置值 */
-    value: {
-        type: [String, Number] as PropType<string | number>,
-        default: ''
-    },
-    /** 当前激活输入item，是否带有呼吸效果 */
-    breathe: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否自动获取焦点 */
-    focus: {
-        type: Boolean,
-        default: false
-    },
-    /** 字体是否加粗 */
-    bold: {
-        type: Boolean,
-        default: false
-    },
-    /** 字体大小 */
-    fontSize: {
-        type: [String, Number] as PropType<string | number>,
-        default: 60
-    },
-    /** 激活样式 */
-    activeColor: {
-        type: String,
-        default: '#2979ff'
-    },
-    /** 未激活的样式 */
-    inactiveColor: {
-        type: String,
-        default: '#606266'
-    },
-    /** 输入框的大小，单位rpx，宽等于高 */
-    width: {
-        type: [Number, String] as PropType<number | string>,
-        default: '80'
-    },
-    /** 是否隐藏原生键盘 */
-    disabledKeyboard: {
-        type: Boolean,
-        default: false
-    }
-};
-
-/**
- * u-message-input 组件 props 类型
- */
-export type MessageInputProps = ExtractPropTypes<typeof MessageInputProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { MessageInputMode } from '../../types/global';
+
+/**
+ * u-message-input 组件 props 类型定义
+ * @description 验证码/短信输入框，支持多种样式
+ */
+export const MessageInputProps = {
+    /** 最大输入长度 */
+    maxlength: {
+        type: [Number, String] as PropType<number | string>,
+        default: 4
+    },
+    /** 是否用圆点填充 */
+    dotFill: {
+        type: Boolean,
+        default: false
+    },
+    /** 显示模式，box-盒子，bottomLine-底部横线，middleLine-中部横线 */
+    mode: {
+        type: String as PropType<MessageInputMode>,
+        default: 'box'
+    },
+    /** 预置值 */
+    value: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    /** 当前激活输入item，是否带有呼吸效果 */
+    breathe: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否自动获取焦点 */
+    focus: {
+        type: Boolean,
+        default: false
+    },
+    /** 字体是否加粗 */
+    bold: {
+        type: Boolean,
+        default: false
+    },
+    /** 字体大小 */
+    fontSize: {
+        type: [String, Number] as PropType<string | number>,
+        default: 60
+    },
+    /** 激活样式 */
+    activeColor: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 未激活的样式 */
+    inactiveColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** 输入框的大小，单位rpx，宽等于高 */
+    width: {
+        type: [Number, String] as PropType<number | string>,
+        default: '80'
+    },
+    /** 是否隐藏原生键盘 */
+    disabledKeyboard: {
+        type: Boolean,
+        default: false
+    }
+};
+
+/**
+ * u-message-input 组件 props 类型
+ */
+export type MessageInputProps = ExtractPropTypes<typeof MessageInputProps>;