uview-ultra 4.5.46

package/components/up-text/up-text.vue

@@ -0,0 +1,365 @@
+<template>
+    <view
+        class="up-text"
+        :class="[customClass]"
+        v-if="show"
+        :style="wrapStyle"
+        @tap="clickHandler"
+    >
+        <text
+            :class="['up-text__price', type && `up-text__value--${type}`]"
+            v-if="mode === 'price'"
+            :style="[valueStyle]"
+            >￥</text
+        >
+        <view class="up-text__prefix-icon" v-if="prefixIcon">
+            <up-icon
+                :name="prefixIcon"
+                :customStyle="addStyle(iconStyle)"
+            ></up-icon>
+        </view>
+        <up-link
+            v-if="mode === 'link'"			class="up-text__value"
+            :style="{fontWeight: valueStyle.fontWeight, wordWrap: valueStyle.wordWrap, fontSize: valueStyle.fontSize}"			:class="[			    type && `up-text__value--${type}`,			    lines && `up-line-${lines}`			]"			:text="value"
+            :href="href"
+            underLine
+        ></up-link>
+        <template v-else-if="openType && isMp">
+            <button
+                class="up-reset-button up-text__value"
+                :style="[valueStyle]"
+                :data-index="index"
+                :openType="openType"
+                @getuserinfo="onGetUserInfo"
+                @contact="onContact"
+                @getphonenumber="onGetPhoneNumber"
+                @error="onError"
+                @launchapp="onLaunchApp"
+                @opensetting="onOpenSetting"
+                :lang="lang"
+                :session-from="sessionFrom"
+                :send-message-title="sendMessageTitle"
+                :send-message-path="sendMessagePath"
+                :send-message-img="sendMessageImg"
+                :show-message-card="showMessageCard"
+                :app-parameter="appParameter"
+            >
+                {{ value }}
+            </button>
+        </template>
+        <text
+            v-else
+            class="up-text__value"
+            :style="[valueStyle]"
+            :class="[
+                type && `up-text__value--${type}`,
+                lines && `up-line-${lines}`
+            ]"
+            >{{ value }}</text
+        >
+        <view class="up-text__suffix-icon" v-if="suffixIcon">
+            <up-icon
+                :name="suffixIcon"
+                :customStyle="addStyle(iconStyle)"
+            ></up-icon>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { propsText } from './props.js'
+import { commonProps } from '../../libs/composable/useUltraUI.js'
+import { addStyle, addUnit, deepMerge, error, priceFormat, timeFormat } from '../../libs/function/index.js';
+import test from '../../libs/function/test.js';
+
+function normalizeLineHeight(value) {
+    const valueString = String(value).trim()
+    const numericValue = Number(valueString)
+    const isUnitless =
+        /^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(valueString) &&
+        numericValue > 0 &&
+        numericValue < 10
+
+    return isUnitless ? valueString : addUnit(value)
+}
+
+/**
+ * Text 文本
+ * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+ * @tutorial https://ijry.github.io/uview-plus/components/loading.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	文本行高，支持带单位值或无单位倍数（如 1.2）
+ * @property {String} 					align		文本对齐方式，可选值left|center|right（默认 'left' ）
+ * @property {String} 					wordWrap	文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+ * @event {Function} click  点击触发事件
+ * @example <up-text text="我用十年青春,赴你最后之约"></up-text>
+ */
+defineOptions({
+    name: 'up-text',
+    // #ifdef MP-WEIXIN
+    options: {
+        virtualHost: true
+    }
+    // #endif
+})
+
+const props = defineProps({
+    ...commonProps,
+    sessionFrom: String,
+    sendMessageTitle: String,
+    sendMessagePath: String,
+    sendMessageImg: String,
+    showMessageCard: Boolean,
+    appParameter: String,
+    formType: String,
+    ...propsText.props
+})
+
+const emit = defineEmits([
+    'click',
+    'getuserinfo',
+    'contact',
+    'getphonenumber',
+    'error',
+    'launchapp',
+    'opensetting'
+])
+
+const isNvue = computed(() => {
+    let nvue = false
+    // #ifdef APP-NVUE
+    nvue = true
+    // #endif
+    return nvue
+})
+
+const isMp = computed(() => {
+    let mp = false
+    // #ifdef MP
+    mp = true
+    // #endif
+    return mp
+})
+
+const valueStyle = computed(() => {
+    const style = {
+        textDecoration: props.decoration,
+        fontWeight: props.bold ? 'bold' : 'normal',
+        wordWrap: props.wordWrap,
+        fontSize: addUnit(props.size)
+    }
+    !props.type && (style.color = props.color)
+    isNvue.value && props.lines && (style.lines = props.lines)
+    props.lineHeight &&
+        (style.lineHeight = normalizeLineHeight(props.lineHeight))
+    !isNvue.value && props.block && (style.display = 'block')
+    return deepMerge(style, addStyle(props.customStyle))
+})
+
+const wrapStyle = computed(() => {
+    const style = {
+        margin: props.margin,
+        justifyContent: props.align === 'left' ? 'flex-start' : props.align === 'center' ? 'center' : 'flex-end'
+    }
+    if (props.flex1) {
+        style.flex = 1
+        // #ifndef APP-NVUE
+        style.width = '100%'
+        // #endif
+    }
+    return style
+})
+
+const value = computed(() => {
+    const {
+        text,
+        mode,
+        format,
+        href
+    } = props
+    // 价格类型
+    if (mode === 'price') {
+        // 如果text不为金额进行提示
+        if (!/^\d+(\.\d+)?$/.test(text)) {
+            error('金额模式下，text参数需要为金额格式');
+        }
+        // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
+        if (test.func(format)) {
+            // 如果用户传入的是函数，使用函数格式化
+            return format(text)
+        }
+        // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+        return priceFormat(text, 2)
+    } if (mode === 'date') {
+        // 判断是否合法的日期或者时间戳
+        !test.date(text) && error('日期模式下，text参数需要为日期或时间戳格式')
+        // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+        if (test.func(format)) {
+            // 如果用户传入的是函数，使用函数格式化
+            return format(text)
+        } if (format) {
+            // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+            return timeFormat(text, format)
+        }
+        // 如果没有设置format，则设置为默认的时间格式化形式
+        return timeFormat(text, 'yyyy-mm-dd')
+    } if (mode === 'phone') {
+        // 判断是否合法的手机号
+        // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
+        if (test.func(format)) {
+            // 如果用户传入的是函数，使用函数格式化
+            return format(text)
+        } if (format === 'encrypt') {
+            // 如果format为encrypt，则将手机号进行星号加密处理
+            return `${text.substr(0, 3)}****${text.substr(7)}`
+        }
+        return text
+    } if (mode === 'name') {
+        // 判断是否合法的字符粗
+        !(typeof (text) === 'string') && error('姓名模式下，text参数需要为字符串格式')
+        if (test.func(format)) {
+            // 如果用户传入的是函数，使用函数格式化
+            return format(text)
+        } if (format === 'encrypt') {
+            // 如果format为encrypt，则将姓名进行星号加密处理
+            return formatName(text)
+        }
+        return text
+    } if (mode === 'link') {
+        // 判断是否合法的字符粗
+        !test.url(href) && error('超链接模式下，href参数需要为URL格式')
+        return text
+    }
+    return text
+})
+
+// 默认的姓名脱敏规则
+function formatName(name) {
+    let value = ''
+    if (name.length === 2) {
+        value = name.substr(0, 1) + '*'
+    } else if (name.length > 2) {
+        let char = ''
+        for (let i = 0, len = name.length - 2; i < len; i++) {
+            char += '*'
+        }
+        value = name.substr(0, 1) + char + name.substr(-1, 1)
+    } else {
+        value = name
+    }
+    return value
+}
+
+function clickHandler() {
+    // 如果为手机号模式，拨打电话
+    if (props.call && props.mode === 'phone') {
+        uni.makePhoneCall({
+            phoneNumber: 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/components.scss';
+
+.up-text {
+    @include flex(row);
+    align-items: center;
+    flex-wrap: nowrap;
+
+    &__price {
+        font-size: 14px;
+        color: $up-content-color;
+    }
+
+    &__value {
+        font-size: 14px;
+        @include flex;
+        color: $up-content-color;
+        flex-wrap: wrap;
+        // flex: 1;
+        text-overflow: ellipsis;
+        align-items: center;
+
+        &--primary {
+            color: $up-primary;
+        }
+
+        &--warning {
+            color: $up-warning;
+        }
+
+        &--success {
+            color: $up-success;
+        }
+
+        &--info {
+            color: $up-info;
+        }
+
+        &--error {
+            color: $up-error;
+        }
+
+        &--main {
+            color: $up-main-color;
+        }
+
+        &--content {
+            color: $up-content-color;
+        }
+
+        &--tips {
+            color: $up-tips-color;
+        }
+
+        &--light {
+            color: $up-light-color;
+        }
+    }
+}
+</style>

package/components/up-text/value.js

@@ -0,0 +1,87 @@
+import { error, priceFormat, timeFormat } from '../../libs/function/index.js';
+import test from '../../libs/function/test.js';
+export default {
+    computed: {
+        // 经处理后需要显示的值
+        value() {
+            const {
+                text,
+                mode,
+                format,
+                href
+            } = this
+            // 价格类型
+            if (mode === 'price') {
+                // 如果text不为金额进行提示
+                if (!/^\d+(\.\d+)?$/.test(text)) {
+                    error('金额模式下，text参数需要为金额格式');
+                }
+                // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                }
+                // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+                return priceFormat(text, 2)
+            } if (mode === 'date') {
+                // 判断是否合法的日期或者时间戳
+                !test.date(text) && error('日期模式下，text参数需要为日期或时间戳格式')
+                // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format) {
+                    // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+                    return timeFormat(text, format)
+                }
+                // 如果没有设置format，则设置为默认的时间格式化形式
+                return timeFormat(text, 'yyyy-mm-dd')
+            } if (mode === 'phone') {
+                // 判断是否合法的手机号
+                // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format === 'encrypt') {
+                    // 如果format为encrypt，则将手机号进行星号加密处理
+                    return `${text.substr(0, 3)}****${text.substr(7)}`
+                }
+                return text
+            } if (mode === 'name') {
+                // 判断是否合法的字符粗
+                !(typeof (text) === 'string') && error('姓名模式下，text参数需要为字符串格式')
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format === 'encrypt') {
+                    // 如果format为encrypt，则将姓名进行星号加密处理
+                    return this.formatName(text)
+                }
+                return text
+            } if (mode === 'link') {
+                // 判断是否合法的字符粗
+                !test.url(href) && error('超链接模式下，href参数需要为URL格式')
+                return text
+            }
+            return text
+        }
+    },
+    methods: {
+        // 默认的姓名脱敏规则
+        formatName(name) {
+            let value = ''
+            if (name.length === 2) {
+                value = name.substr(0, 1) + '*'
+            } else if (name.length > 2) {
+                let char = ''
+                for (let i = 0, len = name.length - 2; i < len; i++) {
+                    char += '*'
+                }
+                value = name.substr(0, 1) + char + name.substr(-1, 1)
+            } else {
+                value = name
+            }
+            return value
+        }
+    }
+}

package/components/up-textarea/props.js

@@ -0,0 +1,132 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+	props: {
+		// 输入框的内容
+		value: {
+			type: [String, Number],
+			default: () => defProps.textarea.value
+		},
+		// 输入框的内容
+		modelValue: {
+			type: [String, Number],
+			default: () => defProps.textarea.value
+		},
+		// 输入框为空时占位符
+		placeholder: {
+			type: [String, Number],
+			default: () => defProps.textarea.placeholder
+		},
+		// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
+		placeholderClass: {
+			type: String,
+			default: () => defProps.input.placeholderClass
+		},
+		// 指定placeholder的样式
+		placeholderStyle: {
+			type: [String, Object],
+			default: () => defProps.input.placeholderStyle
+		},
+		// 输入框高度
+		height: {
+			type: [String, Number],
+			default: () => defProps.textarea.height
+		},
+		// 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效
+		confirmType: {
+			type: String,
+			default: () => defProps.textarea.confirmType
+		},
+		// 点击键盘右下角按钮时是否保持键盘不收起，confirmType 非 return 时有效
+		confirmHold: {
+			type: Boolean,
+			default: () => defProps.textarea.confirmHold
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: () => defProps.textarea.disabled
+		},
+		// 是否显示统计字数
+		count: {
+			type: Boolean,
+			default: () => defProps.textarea.count
+		},
+		// 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现
+		focus: {
+			type: Boolean,
+			default: () => defProps.textarea.focus
+		},
+		// 是否自动增加高度
+		autoHeight: {
+			type: Boolean,
+			default: () => defProps.textarea.autoHeight
+		},
+		// 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
+		fixed: {
+			type: Boolean,
+			default: () => defProps.textarea.fixed
+		},
+		// 指定光标与键盘的距离
+		cursorSpacing: {
+			type: Number,
+			default: () => defProps.textarea.cursorSpacing
+		},
+		// 指定focus时的光标位置
+		cursor: {
+			type: [String, Number],
+			default: () => defProps.textarea.cursor
+		},
+		// 是否显示键盘上方带有”完成“按钮那一栏，
+		showConfirmBar: {
+			type: Boolean,
+			default: () => defProps.textarea.showConfirmBar
+		},
+		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+		selectionStart: {
+			type: Number,
+			default: () => defProps.textarea.selectionStart
+		},
+		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+		selectionEnd: {
+			type: Number,
+			default: () => defProps.textarea.selectionEnd
+		},
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+			default: () => defProps.textarea.adjustPosition
+		},
+		// 是否去掉 iOS 下的默认内边距，只微信小程序有效
+		disableDefaultPadding: {
+			type: Boolean,
+			default: () => defProps.textarea.disableDefaultPadding
+		},
+		// focus时，点击页面的时候不收起键盘，只微信小程序有效
+		holdKeyboard: {
+			type: Boolean,
+			default: () => defProps.textarea.holdKeyboard
+		},
+		// 最大输入长度，设置为 -1 的时候不限制最大长度
+		maxlength: {
+			type: [String, Number],
+			default: () => defProps.textarea.maxlength
+		},
+		// 边框类型，surround-四周边框，bottom-底部边框
+		border: {
+			type: String,
+			default: () => defProps.textarea.border
+		},
+		// 用于处理或者过滤输入框内容的方法
+		formatter: {
+			type: [Function, null],
+			default: () => defProps.textarea.formatter
+		},
+		// 是否忽略组件内对文本合成系统事件的处理
+		ignoreCompositionEvent: {
+			type: Boolean,
+			default: true
+		}
+	}
+})