uview-pro 0.1.1 → 0.2.1

package/components/u-text/u-text.vue

@@ -0,0 +1,326 @@
+<template>
+    <view
+        v-if="props.show"
+        class="u-text"
+        :class="[
+            props.bold ? 'u-text--bold' : '',
+            props.block ? 'u-text--block' : 'u-text--inline',
+            props.lines ? 'u-text--ellipsis' : '',
+            `u-text--align-${props.align}`,
+            customClass
+        ]"
+        :style="textStyle"
+        @click="onClick"
+    >
+        <!-- prefixIcon -->
+        <view class="u-text__icon u-text__prefix-icon" v-if="props.prefixIcon">
+            <u-icon :name="props.prefixIcon" :custom-style="$u.toStyle(props.iconStyle)"></u-icon>
+        </view>
+        <!-- 价格模式 -->
+        <text v-if="props.mode === 'price'" :class="['u-text__price', props.type && `u-text__value--${props.type}`]" :style="textValueStyle"> ￥{{ displayValue }} </text>
+        <!-- link 模式 -->
+        <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>{{ displayValue }}</u-link>
+        <template v-else-if="props.openType && isMp">
+            <button
+                class="u-reset-button u-text__value"
+                :class="props.type && `u-text__value--${props.type}`"
+                :style="textValueStyle"
+                :openType="props.openType"
+                @getuserinfo="onGetUserInfo"
+                @contact="onContact"
+                @getphonenumber="onGetPhoneNumber"
+                @error="onError"
+                @launchapp="onLaunchApp"
+                @opensetting="onOpenSetting"
+                :lang="props.lang"
+                :session-from="props.sessionFrom"
+                :send-message-title="props.sendMessageTitle"
+                :send-message-path="props.sendMessagePath"
+                :send-message-img="props.sendMessageImg"
+                :show-message-card="props.showMessageCard"
+                :app-parameter="props.appParameter"
+            >
+                {{ displayValue }}
+            </button>
+        </template>
+        <!-- 默认模式 -->
+        <text v-else class="u-text__value" :style="textValueStyle" :class="[props.type && `u-text__value--${props.type}`, props.lines ? `u-line-${props.lines}` : '']">
+            {{ displayValue }}
+        </text>
+        <!-- 后缀图标 -->
+        <view class="u-text__icon u-text__suffix-icon" v-if="props.suffixIcon">
+            <u-icon :name="props.suffixIcon" :custom-style="$u.toStyle(props.iconStyle)"></u-icon>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-text',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TextProps } from './types';
+import { $u } from '../../';
+
+/**
+ * Text 文本
+ * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+ * @tutorial https://uviewpro.cn/zh/components/text.html
+ * @property {String} 					type		主题颜色
+ * @property {Boolean} 					show		是否显示（默认 true ）
+ * @property {String | Number}			text		显示的值
+ * @property {String}					prefixIcon	前置图标
+ * @property {String} 					suffixIcon	后置图标
+ * @property {String} 					mode		文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+ * @property {String} 					href		mode=link下，配置的链接
+ * @property {String | Function} 		format		格式化规则
+ * @property {Boolean} 					call		mode=phone时，点击文本是否拨打电话（默认 false ）
+ * @property {String} 					openType	小程序的打开方式
+ * @property {Boolean} 					bold		是否粗体，默认normal（默认 false ）
+ * @property {Boolean} 					block		是否块状（默认 false ）
+ * @property {String | Number} 			lines		文本显示的行数，如果设置，超出此行数，将会显示省略号
+ * @property {String} 					color		文本颜色（默认 '#303133' ）
+ * @property {String | Number} 			size		字体大小（默认 15 ）
+ * @property {Object | String} 			iconStyle	图标的样式 （默认 {fontSize: '15px'} ）
+ * @property {String} 					decoration	文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
+ * @property {Object | String | Number}	margin		外边距，对象、字符串，数值形式均可（默认 0 ）
+ * @property {String | Number} 			lineHeight	文本行高
+ * @property {String} 					align		文本对齐方式，可选值left|center|right（默认 'left' ）
+ * @property {String} 					wordWrap	文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+ * @event {Function} click  点击触发事件
+ * @example <u-text text="我用十年青春,赴你最后之约"></u-text>
+ */
+
+const props = defineProps(TextProps);
+const emit = defineEmits(['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'launchapp', 'opensetting']);
+
+// 是否小程序环境
+const isMp = computed(() => {
+    let mp = false;
+    // #ifdef MP
+    mp = true;
+    // #endif
+    return mp;
+});
+
+const isNvue = computed(() => {
+    let nvue = false;
+    // #ifdef APP-NVUE
+    nvue = true;
+    // #endif
+    return nvue;
+});
+
+// 处理显示的值（参考原value.js逻辑，简化实现）
+const displayValue = computed(() => {
+    const { format, text, href, mode } = props;
+    let val = text;
+    if (typeof format === 'function') {
+        val = format(val);
+    } else if (typeof format === 'string' && format) {
+        // 可扩展字符串格式化
+    }
+    switch (mode) {
+        case 'price':
+            if (!/^\d+(\.\d+)?$/.test(String(val))) return val;
+            // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+            val = $u.formatPrice(val, 2);
+            break;
+        case 'phone':
+            // 判断是否合法的手机号
+            if (format === 'encrypt') {
+                // 如果format为encrypt，则将手机号进行星号加密处理
+                val = String(val).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+            }
+            break;
+        case 'name':
+            // 判断是否合法的字符串
+            if (!$u.test.string(val)) return val;
+            if (format === 'encrypt') {
+                // 如果format为encrypt，则将姓名进行星号加密处理
+                return $u.formatName(val);
+            }
+            break;
+        case 'date':
+            // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+            if ($u.test.string(format) && !$u.test.empty(format)) {
+                // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+                return $u.timeFormat(val, format);
+            }
+            // 如果没有设置format，则设置为默认的时间格式化形式
+            return $u.timeFormat(val, 'yyyy-mm-dd');
+        case 'link':
+            if (!$u.test.url(href)) return val;
+            break;
+    }
+    return val;
+});
+
+/**
+ * 获取文本样式
+ */
+const textStyle = computed(() => {
+    const style: Record<string, any> = {
+        margin: typeof props.margin === 'number' ? `${props.margin}px` : props.margin,
+        justifyContent: props.align === 'left' ? 'flex-start' : props.align === 'center' ? 'center' : 'flex-end'
+    };
+    return $u.toStyle(style);
+});
+
+/**
+ * 获取文本值样式
+ */
+const textValueStyle = computed(() => {
+    const style: Record<string, any> = {
+        textDecoration: props.decoration,
+        fontWeight: props.bold ? 'bold' : 'normal',
+        wordWrap: props.wordWrap,
+        fontSize: $u.addUnit(props.size),
+        lineHeight: props.lineHeight ? (typeof props.lineHeight === 'number' ? `${props.lineHeight}px` : props.lineHeight) : undefined
+    };
+    if (props.lines) {
+        style['display'] = '-webkit-box';
+        style['-webkit-box-orient'] = 'vertical';
+    }
+    if (!props.type) style.color = props.color;
+    if (isNvue.value && props.lines) style.lines = props.lines;
+    if (props.lineHeight) style.lineHeight = $u.addUnit(props.lineHeight);
+
+    // 合并 textStyle，优先对象，其次字符串
+    if ($u.test.object(props.textStyle)) {
+        // 只合并对象类型，防止类型错误
+        return $u.toStyle($u.deepMerge(style, props.textStyle as Record<string, any>));
+    }
+    if ($u.test.string(props.textStyle)) {
+        return `${$u.toStyle(style)}${props.textStyle}`;
+    }
+    return $u.toStyle(style);
+});
+
+/**
+ * 点击事件
+ */
+function onClick() {
+    // 如果为手机号模式，拨打电话
+    if (props.call && props.mode === 'phone') {
+        uni.makePhoneCall({
+            phoneNumber: String(props.text)
+        });
+    }
+    emit('click');
+}
+function onGetUserInfo(event) {
+    emit('getuserinfo', event.detail);
+}
+function onContact(event) {
+    emit('contact', event.detail);
+}
+function onGetPhoneNumber(event) {
+    emit('getphonenumber', event.detail);
+}
+function onError(event) {
+    emit('error', event.detail);
+}
+function onLaunchApp(event) {
+    emit('launchapp', event.detail);
+}
+function onOpenSetting(event) {
+    emit('opensetting', event.detail);
+}
+</script>
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-text {
+    @include vue-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex: 1;
+    word-break: break-all;
+
+    &--bold {
+        font-weight: bold;
+    }
+
+    &--inline {
+        display: inline-flex;
+    }
+
+    &--inline &__value {
+        display: inline-flex;
+    }
+
+    &--inline &__icon {
+        display: inline-flex;
+    }
+
+    &--block {
+        display: flex;
+        /* #ifndef APP-NVUE */
+        width: 100%;
+        /* #endif */
+    }
+
+    &--block &__value {
+        display: flex;
+    }
+
+    &__price {
+        font-size: 14px;
+        color: $u-content-color;
+    }
+
+    &__value {
+        font-size: 14px;
+        @include vue-flex;
+        color: $u-content-color;
+        flex-wrap: wrap;
+        text-overflow: ellipsis;
+        align-items: center;
+
+        &--primary {
+            color: $u-type-primary;
+        }
+
+        &--warning {
+            color: $u-type-warning;
+        }
+
+        &--success {
+            color: $u-type-success;
+        }
+
+        &--info {
+            color: $u-type-info;
+        }
+
+        &--error {
+            color: $u-type-error;
+        }
+
+        &--main {
+            color: $u-main-color;
+        }
+
+        &--content {
+            color: $u-content-color;
+        }
+
+        &--tips {
+            color: $u-tips-color;
+        }
+
+        &--light {
+            color: $u-light-color;
+        }
+    }
+}
+</style>

package/index.scss

@@ -21,3 +21,5 @@
 /* #ifdef H5 */
 @import './libs/css/style.h5.scss';
 /* #endif */
+
+@import './libs/css/style.components.scss';

package/index.ts

@@ -1,61 +1,5 @@
-// post类型对象参数转为get类型url参数
-import queryParams from './libs/function/queryParams';
-// 路由封装
-import route from './libs/function/route';
-// 时间格式化
-import timeFormat from './libs/function/timeFormat';
-// 时间戳格式化,返回多久之前
-import timeFrom from './libs/function/timeFrom';
-// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
-import colorGradients from './libs/function/colorGradient';
-// 生成全局唯一guid字符串
-import guid from './libs/function/guid';
-// 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
-import color from './libs/function/color';
+import { $u, type RequestOptions } from './libs';
 import type { UViewProOptions } from './types/global';
-// 根据type获取图标名称
-import type2icon from './libs/function/type2icon';
-// 打乱数组的顺序
-import randomArray from './libs/function/randomArray';
-// 对象和数组的深度克隆
-import deepClone from './libs/function/deepClone';
-// 对象深度拷贝
-import deepMerge from './libs/function/deepMerge';
-// 添加单位
-import addUnit from './libs/function/addUnit';
-// 规则检验
-import test from './libs/function/test';
-// 随机数
-import random from './libs/function/random';
-// 去除空格
-import trim from './libs/function/trim';
-// toast提示，对uni.showToast的封装
-import toast from './libs/function/toast';
-// 获取父组件参数
-import getParent from './libs/function/getParent';
-// 获取整个父组件
-import $parent from './libs/function/$parent';
-// 获取sys()和os()工具方法
-// 获取设备信息，挂载到$u的sys()(system的缩写)属性中，
-// 同时把安卓和ios平台的名称"ios"和"android"挂到$u.os()中，方便取用
-import { sys, os } from './libs/function/sys';
-// 防抖方法
-import debounce from './libs/function/debounce';
-// 节流方法
-import throttle from './libs/function/throttle';
-// 获取元素的位置信息
-import getRect from './libs/function/getRect';
-// 获取父组件
-import { parentData, parent } from './libs/function/parent';
-
-// 配置信息
-import config from './libs/config/config';
-// 各个需要fixed的地方的z-index配置文件
-import zIndex from './libs/config/zIndex';
-import { dispatch, broadcast } from './libs/util/emitter';
-import { mitt } from './libs/util/mitt';
-// http相关
-import httpPlugin, { Request, http, type RequestOptions, type RequestConfig, type RequestInterceptor, type RequestMeta } from './libs/request/index';
 
 declare const uni: {
     [key: string]: any;
@@ -66,92 +10,11 @@ declare const uni: {
     request: (options: RequestOptions) => any;
 };
 
-/**
- * $u 工具库类型声明
- */
-export interface UViewUtils {
-    queryParams: typeof queryParams;
-    route: typeof route;
-    timeFormat: typeof timeFormat;
-    date: typeof timeFormat;
-    timeFrom: typeof timeFrom;
-    colorGradient: typeof colorGradients.colorGradient;
-    colorToRgba: typeof colorGradients.colorToRgba;
-    guid: typeof guid;
-    color: typeof color;
-    sys: typeof sys;
-    os: typeof os;
-    type2icon: typeof type2icon;
-    randomArray: typeof randomArray;
-    dispatch: typeof dispatch;
-    broadcast: typeof broadcast;
-    hexToRgb: typeof colorGradients.hexToRgb;
-    rgbToHex: typeof colorGradients.rgbToHex;
-    test: typeof test;
-    random: typeof random;
-    deepClone: typeof deepClone;
-    deepMerge: typeof deepMerge;
-    getParent: typeof getParent;
-    $parent: typeof $parent;
-    parent: typeof parent;
-    parentData: typeof parentData;
-    addUnit: typeof addUnit;
-    trim: typeof trim;
-    type: string[];
-    http: typeof http;
-    toast: typeof toast;
-    config: typeof config;
-    zIndex: typeof zIndex;
-    debounce: typeof debounce;
-    throttle: typeof throttle;
-    mitt: ReturnType<typeof mitt>;
-    getRect: typeof getRect;
-}
-
-export const $u: UViewUtils = {
-    queryParams: queryParams,
-    route: route,
-    timeFormat: timeFormat,
-    date: timeFormat, // 另名date
-    timeFrom,
-    colorGradient: colorGradients.colorGradient,
-    colorToRgba: colorGradients.colorToRgba,
-    guid,
-    color,
-    sys,
-    os,
-    type2icon,
-    randomArray,
-    dispatch,
-    broadcast,
-    hexToRgb: colorGradients.hexToRgb,
-    rgbToHex: colorGradients.rgbToHex,
-    test,
-    random,
-    deepClone,
-    deepMerge,
-    getParent,
-    $parent,
-    parent,
-    parentData,
-    addUnit,
-    trim,
-    type: ['primary', 'success', 'error', 'warning', 'info'],
-    http,
-    toast,
-    config, // uView配置信息相关，比如版本号
-    zIndex,
-    debounce,
-    throttle,
-    mitt: mitt(),
-    getRect
-};
-
 // $u挂载到uni对象上
 const install = (app: any, options?: UViewProOptions): void => {
     uni.$u = $u;
     if (options && options.theme) {
-        $u.color = deepMerge($u.color, options.theme);
+        $u.color = $u.deepMerge($u.color, options.theme);
     }
     // 可扩展更多配置项
     app.config.globalProperties.$u = $u;
@@ -161,42 +24,6 @@ export default {
     install
 };
 
-// 工具方法单独导出，支持 import { deepClone } from 'uview-pro'
-export {
-    queryParams,
-    route,
-    timeFormat,
-    timeFrom,
-    guid,
-    color,
-    sys,
-    os,
-    type2icon,
-    randomArray,
-    deepClone,
-    deepMerge,
-    addUnit,
-    test,
-    random,
-    trim,
-    toast,
-    debounce,
-    throttle,
-    getRect,
-    getParent,
-    $parent,
-    parent,
-    parentData,
-    dispatch,
-    broadcast,
-    config,
-    zIndex
-};
-
-// 颜色相关方法单独导出
-export const { colorGradient, colorToRgba, hexToRgb, rgbToHex } = colorGradients;
-
-// http相关导出
-export { Request, httpPlugin, http, type RequestOptions, type RequestConfig, type RequestInterceptor, type RequestMeta };
+export * from './libs';
 
 export type { UViewProOptions };

package/libs/css/style.components.scss

@@ -5,3 +5,12 @@
     flex-direction: $direction;
     /* #endif */
 }
+
+// 通过scss的mixin功能，把原来需要写4行的css，变成一行
+// 目的是保持代码干净整洁，不至于在nvue下，到处都要写display:flex的条件编译
+@mixin flex($direction: row) {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: $direction;
+}

package/libs/css/style.nvue.scss

@@ -1,3 +1,15 @@
 .nvue {
     font-size: 24rpx;
 }
+
+view,
+scroll-view,
+swiper-item {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: auto;
+    align-items: stretch;
+    align-content: flex-start;
+}

package/libs/css/style.vue.scss

@@ -38,37 +38,39 @@ page {
 /* end--各种hover点击反馈相关的类名--end */
 
 /* start--文本行数限制--start */
-.u-line-1 {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.u-line-2 {
-    -webkit-line-clamp: 2;
-}
-
-.u-line-3 {
-    -webkit-line-clamp: 3;
-}
-
-.u-line-4 {
-    -webkit-line-clamp: 4;
-}
-
-.u-line-5 {
-    -webkit-line-clamp: 5;
+// 超出行数，自动显示行尾省略号，最多5行
+// 来自uView的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
+@for $i from 1 through 5 {
+    .u-line-#{$i} {
+        /* #ifdef APP-NVUE */
+        // nvue下，可以直接使用lines属性，这是weex特有样式
+        lines: $i;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex: 1;
+        /* #endif */
+
+        /* #ifndef APP-NVUE */
+        // vue下，单行和多行显示省略号需要单独处理
+        @if $i == '1' {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        } @else {
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-break: break-all;
+            -webkit-line-clamp: $i;
+            -webkit-box-orient: vertical;
+        }
+        /* #endif */
+    }
 }
 
-.u-line-2,
-.u-line-3,
-.u-line-4,
-.u-line-5 {
-    overflow: hidden;
-    word-break: break-all;
-    text-overflow: ellipsis;
-    display: -webkit-box; // 弹性伸缩盒
-    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
+.u-line-force {
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical !important;
 }
 
 /* end--文本行数限制--end */
@@ -163,15 +165,24 @@ uni-toast .uni-toast {
 /* end--提升H5端uni.toast()的层级，避免被uView的modal等遮盖--end */
 
 /* start--去除button的所有默认样式--start */
+// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
 .u-reset-button {
     padding: 0;
+    margin: 0;
+    background-color: transparent;
+    /* #ifndef APP-PLUS */
     font-size: inherit;
     line-height: inherit;
-    background-color: transparent;
     color: inherit;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    border-width: 0;
+    /* #endif */
 }
 
+/* #ifndef APP-NVUE */
 .u-reset-button::after {
     border: none;
 }
+/* #endif */
 /* end--去除button的所有默认样式--end */