feat:还原更新框架
This commit is contained in:
@@ -1,120 +1,117 @@
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import TextDefaultProps from './text'
|
||||
import { registerComponentProps } from '../../libs/config/props.js'
|
||||
|
||||
const defProps = registerComponentProps(TextDefaultProps)
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 主题颜色
|
||||
type: {
|
||||
type: String,
|
||||
default: () => defProps.text.type
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.show
|
||||
},
|
||||
// 显示的值
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.text
|
||||
},
|
||||
// 前置图标
|
||||
prefixIcon: {
|
||||
type: String,
|
||||
default: () => defProps.text.prefixIcon
|
||||
},
|
||||
// 后置图标
|
||||
suffixIcon: {
|
||||
type: String,
|
||||
default: () => defProps.text.suffixIcon
|
||||
},
|
||||
// 文本处理的匹配模式
|
||||
// text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => defProps.text.mode
|
||||
},
|
||||
// mode=link下，配置的链接
|
||||
href: {
|
||||
type: String,
|
||||
default: () => defProps.text.href
|
||||
},
|
||||
// 格式化规则
|
||||
format: {
|
||||
type: [String, Function],
|
||||
default: () => defProps.text.format
|
||||
},
|
||||
// mode=phone时，点击文本是否拨打电话
|
||||
call: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.call
|
||||
},
|
||||
// 小程序的打开方式
|
||||
openType: {
|
||||
type: String,
|
||||
default: () => defProps.text.openType
|
||||
},
|
||||
// 是否粗体，默认normal
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.bold
|
||||
},
|
||||
// 是否块状
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.block
|
||||
},
|
||||
// 文本显示的行数，如果设置，超出此行数，将会显示省略号
|
||||
lines: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.lines
|
||||
},
|
||||
// 文本颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: () => defProps.text.color
|
||||
},
|
||||
// 字体大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.size
|
||||
},
|
||||
// 图标的样式
|
||||
iconStyle: {
|
||||
type: [Object, String],
|
||||
default: () => defProps.text.iconStyle
|
||||
},
|
||||
// 文字装饰，下划线，中划线等，可选值 none|underline|line-through
|
||||
decoration: {
|
||||
tepe: String,
|
||||
default: () => defProps.text.decoration
|
||||
},
|
||||
// 外边距，对象、字符串，数值形式均可
|
||||
margin: {
|
||||
type: [Object, String, Number],
|
||||
default: () => defProps.text.margin
|
||||
},
|
||||
// 文本行高
|
||||
lineHeight: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.lineHeight
|
||||
},
|
||||
// 文本对齐方式，可选值left|center|right
|
||||
align: {
|
||||
type: String,
|
||||
default: () => defProps.text.align
|
||||
},
|
||||
// 文字换行，可选值break-word|normal|anywhere
|
||||
wordWrap: {
|
||||
type: String,
|
||||
default: () => defProps.text.wordWrap
|
||||
},
|
||||
// 占满剩余空间
|
||||
flex1: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.flex1
|
||||
}
|
||||
}
|
||||
})
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import defProps from '../../libs/config/props.js'
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 主题颜色
|
||||
type: {
|
||||
type: String,
|
||||
default: () => defProps.text.type
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.show
|
||||
},
|
||||
// 显示的值
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.text
|
||||
},
|
||||
// 前置图标
|
||||
prefixIcon: {
|
||||
type: String,
|
||||
default: () => defProps.text.prefixIcon
|
||||
},
|
||||
// 后置图标
|
||||
suffixIcon: {
|
||||
type: String,
|
||||
default: () => defProps.text.suffixIcon
|
||||
},
|
||||
// 文本处理的匹配模式
|
||||
// text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => defProps.text.mode
|
||||
},
|
||||
// mode=link下，配置的链接
|
||||
href: {
|
||||
type: String,
|
||||
default: () => defProps.text.href
|
||||
},
|
||||
// 格式化规则
|
||||
format: {
|
||||
type: [String, Function],
|
||||
default: () => defProps.text.format
|
||||
},
|
||||
// mode=phone时，点击文本是否拨打电话
|
||||
call: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.call
|
||||
},
|
||||
// 小程序的打开方式
|
||||
openType: {
|
||||
type: String,
|
||||
default: () => defProps.text.openType
|
||||
},
|
||||
// 是否粗体，默认normal
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.bold
|
||||
},
|
||||
// 是否块状
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.block
|
||||
},
|
||||
// 文本显示的行数，如果设置，超出此行数，将会显示省略号
|
||||
lines: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.lines
|
||||
},
|
||||
// 文本颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: () => defProps.text.color
|
||||
},
|
||||
// 字体大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.size
|
||||
},
|
||||
// 图标的样式
|
||||
iconStyle: {
|
||||
type: [Object, String],
|
||||
default: () => defProps.text.iconStyle
|
||||
},
|
||||
// 文字装饰，下划线，中划线等，可选值 none|underline|line-through
|
||||
decoration: {
|
||||
tepe: String,
|
||||
default: () => defProps.text.decoration
|
||||
},
|
||||
// 外边距，对象、字符串，数值形式均可
|
||||
margin: {
|
||||
type: [Object, String, Number],
|
||||
default: () => defProps.text.margin
|
||||
},
|
||||
// 文本行高
|
||||
lineHeight: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.text.lineHeight
|
||||
},
|
||||
// 文本对齐方式，可选值left|center|right
|
||||
align: {
|
||||
type: String,
|
||||
default: () => defProps.text.align
|
||||
},
|
||||
// 文字换行，可选值break-word|normal|anywhere
|
||||
wordWrap: {
|
||||
type: String,
|
||||
default: () => defProps.text.wordWrap
|
||||
},
|
||||
// 占满剩余空间
|
||||
flex1: {
|
||||
type: Boolean,
|
||||
default: () => defProps.text.flex1
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 3.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : jry
|
||||
* @lastTime : 2025-12-19 08:55:21
|
||||
* @FilePath : /uview-plus/libs/config/props/text.js
|
||||
*/
|
||||
export default {
|
||||
// text 组件
|
||||
text: {
|
||||
type: '',
|
||||
show: true,
|
||||
text: '',
|
||||
prefixIcon: '',
|
||||
suffixIcon: '',
|
||||
mode: '',
|
||||
href: '',
|
||||
format: '',
|
||||
call: false,
|
||||
openType: '',
|
||||
bold: false,
|
||||
block: false,
|
||||
lines: '',
|
||||
color: '',
|
||||
size: 15,
|
||||
iconStyle: {
|
||||
fontSize: '15px'
|
||||
},
|
||||
decoration: 'none',
|
||||
margin: 0,
|
||||
lineHeight: '',
|
||||
align: 'left',
|
||||
wordWrap: 'normal',
|
||||
flex1: true
|
||||
}
|
||||
|
||||
}
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : LQ
|
||||
* @lastTime : 2021-08-20 17:23:58
|
||||
* @FilePath : /u-view2.0/uview-ui/libs/config/props/text.js
|
||||
*/
|
||||
export default {
|
||||
// text 组件
|
||||
text: {
|
||||
type: '',
|
||||
show: true,
|
||||
text: '',
|
||||
prefixIcon: '',
|
||||
suffixIcon: '',
|
||||
mode: '',
|
||||
href: '',
|
||||
format: '',
|
||||
call: false,
|
||||
openType: '',
|
||||
bold: false,
|
||||
block: false,
|
||||
lines: '',
|
||||
color: '#303133',
|
||||
size: 15,
|
||||
iconStyle: {
|
||||
fontSize: '15px'
|
||||
},
|
||||
decoration: 'none',
|
||||
margin: 0,
|
||||
lineHeight: '',
|
||||
align: 'left',
|
||||
wordWrap: 'normal',
|
||||
flex1: true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
>￥</text
|
||||
>
|
||||
<view class="u-text__prefix-icon" v-if="prefixIcon">
|
||||
<up-icon
|
||||
<u-icon
|
||||
:name="prefixIcon"
|
||||
:customStyle="addStyle(iconStyle)"
|
||||
></up-icon>
|
||||
></u-icon>
|
||||
</view>
|
||||
<u-link
|
||||
v-if="mode === 'link'" class="u-text__value"
|
||||
@@ -59,10 +59,10 @@
|
||||
>{{ value }}</text
|
||||
>
|
||||
<view class="u-text__suffix-icon" v-if="suffixIcon">
|
||||
<up-icon
|
||||
<u-icon
|
||||
:name="suffixIcon"
|
||||
:customStyle="addStyle(iconStyle)"
|
||||
></up-icon>
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -78,7 +78,7 @@ import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
|
||||
/**
|
||||
* Text 文本
|
||||
* @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
|
||||
* @tutorial https://uview-plus.jiangruyi.com/components/loading.html
|
||||
* @tutorial https://ijry.github.io/uview-plus/components/loading.html
|
||||
* @property {String} type 主题颜色
|
||||
* @property {Boolean} show 是否显示（默认 true ）
|
||||
* @property {String | Number} text 显示的值
|
||||
@@ -120,28 +120,26 @@ export default {
|
||||
}
|
||||
// 占满剩余空间
|
||||
if (this.flex1) {
|
||||
style.flex = 1;
|
||||
// #ifndef APP-NVUE
|
||||
style.width = '100%';
|
||||
style.flex = 1;
|
||||
// #ifndef APP-NVUE
|
||||
style.width = '100%';
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
valueStyle() {
|
||||
const style = {
|
||||
textDecoration: this.decoration,
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
wordWrap: this.wordWrap,
|
||||
fontSize: addUnit(this.size)
|
||||
}
|
||||
if (!this.type) {
|
||||
style.color = this.color || this.upThemeVar('--up-content-color', this.$u?.color?.contentColor || '#606266')
|
||||
}
|
||||
this.isNvue && this.lines && (style.lines = this.lines)
|
||||
this.lineHeight &&
|
||||
(style.lineHeight = addUnit(this.lineHeight))
|
||||
!this.isNvue && this.block && (style.display = 'block')
|
||||
return deepMerge(style, addStyle(this.customStyle))
|
||||
valueStyle() {
|
||||
const style = {
|
||||
textDecoration: this.decoration,
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
wordWrap: this.wordWrap,
|
||||
fontSize: addUnit(this.size)
|
||||
}
|
||||
!this.type && (style.color = this.color)
|
||||
this.isNvue && this.lines && (style.lines = this.lines)
|
||||
this.lineHeight &&
|
||||
(style.lineHeight = addUnit(this.lineHeight))
|
||||
!this.isNvue && this.block && (style.display = 'block')
|
||||
return deepMerge(style, addStyle(this.customStyle))
|
||||
},
|
||||
isNvue() {
|
||||
let nvue = false
|
||||
@@ -177,6 +175,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/components.scss';
|
||||
|
||||
.u-text {
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
|
||||
@@ -1,87 +1,87 @@
|
||||
import { error, priceFormat, timeFormat } from '../../libs/function/index';
|
||||
import test from '../../libs/function/test';
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
import { error, priceFormat, timeFormat } from '../../libs/function/index';
|
||||
import test from '../../libs/function/test';
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user