feat: 首次提交
This commit is contained in:
peerless_hero
286
components/firstui/fui-text/fui-text.vue
Normal file
286
components/firstui/fui-text/fui-text.vue
Normal file
@ -0,0 +1,286 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1 4 07 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-text__wrap"
|
||||
:class="[block?'fui-text__block':'fui-text__inline','fui-text__'+align,highlight && !disable?'fui-text__active':'']"
|
||||
:style="{textAlign:align,paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0}"
|
||||
@tap="handleTap">
|
||||
<slot></slot>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text class="fui-text__content"
|
||||
:style="{color:getColor,fontSize:getSize,lineHeight:lineHeight?getSize:'auto',textAlign:align,textDecoration:decoration,fontWeight:fontWeight}"
|
||||
:class="[color?'':'fui-text__'+type,unShrink?'fui-text__unshrink':'']" :selectable="selectable"
|
||||
:userSelect="userSelect" :decode="decode">{{getText(text, textType, format)}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="fui-text__nvue">
|
||||
<text class="fui-text__content"
|
||||
:style="{color:getColor,fontSize:getSize,lineHeight:lineHeight?getSize:'auto',textAlign:align,textDecoration:decoration,fontWeight:fontWeight}"
|
||||
:class="[color?'':'fui-text__'+type,unShrink?'fui-text__unshrink':'']" :userSelect="userSelect"
|
||||
:decode="decode">{{getText(text, textType, format)}}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-text",
|
||||
emits: ['click'],
|
||||
props: {
|
||||
//样式类型：primary，success， warning，danger，purple，gray，black
|
||||
type: {
|
||||
type: String,
|
||||
default: 'black'
|
||||
},
|
||||
text: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fontWeight: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
//left、center、right
|
||||
align: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
//none、 underline、line-through
|
||||
decoration: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
//是否将行高设置与字体大小一致
|
||||
lineHeight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
padding: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['0', '0']
|
||||
}
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//文本类型：text、mobile、amount、name
|
||||
textType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
//是否格式化，仅mobile、amount时有效
|
||||
format: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
call: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//文本是否可选：nvue不支持，加此属性导致事件无法冒泡
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//文本是否可选：微信小程序
|
||||
userSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否解码：App、H5、微信小程序
|
||||
decode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否有点击效果
|
||||
highlight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
unShrink: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
param: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getSize() {
|
||||
const size = (uni && uni.$fui && uni.$fui.fuiText && uni.$fui.fuiText.size) || 32
|
||||
const unit = (uni && uni.$fui && uni.$fui.fuiText && uni.$fui.fuiText.unit) || 'rpx'
|
||||
return (this.size || size) + (this.unit || unit)
|
||||
},
|
||||
getColor() {
|
||||
let color = this.color || ''
|
||||
// #ifdef APP-NVUE
|
||||
if (!color && this.type) {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
const text = uni && uni.$fui && uni.$fui.fuiText;
|
||||
color = {
|
||||
primary: (app && app.primary) || '#465CFF',
|
||||
success: (app && app.success) || '#09BE4F',
|
||||
warning: (app && app.warning) || '#FFB703',
|
||||
danger: (app && app.danger) || '#FF2B2B',
|
||||
purple: (app && app.purple) || '#6831FF',
|
||||
gray: '#B2B2B2',
|
||||
black: (text && text.color) || '#181818'
|
||||
} [this.type]
|
||||
}
|
||||
// #endif
|
||||
return color
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getText(text, textType, format) {
|
||||
let _text = text
|
||||
if (format) {
|
||||
if (textType === 'mobile') {
|
||||
_text = this.numberFormatter(text)
|
||||
} else if (textType === 'amount') {
|
||||
_text = this.moneyFormatter(text)
|
||||
} else if (textType === 'name') {
|
||||
_text = this.nameFormatter(text)
|
||||
}
|
||||
}
|
||||
return _text
|
||||
},
|
||||
numberFormatter(num) {
|
||||
return num.length === 11 ? num.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') : num;
|
||||
},
|
||||
moneyFormatter(money) {
|
||||
return parseFloat(money).toFixed(2).toString().split('').reverse().join('').replace(/(\d{3})/g, '$1,')
|
||||
.replace(
|
||||
/\,$/, '').split('').reverse().join('');
|
||||
},
|
||||
trimAll(value) {
|
||||
return value.toString().replace(/\s+/g, "")
|
||||
},
|
||||
nameFormatter(name) {
|
||||
let _name = this.trimAll(name || '')
|
||||
if (_name && _name.length >= 2) {
|
||||
const arr = _name.split('')
|
||||
_name = arr[0] + '*'
|
||||
if (arr.length > 2) {
|
||||
_name = _name + arr[arr.length - 1]
|
||||
}
|
||||
}
|
||||
return _name
|
||||
},
|
||||
handleTap() {
|
||||
if (this.disable) return;
|
||||
this.$emit('click', {
|
||||
text: this.text,
|
||||
param: this.param
|
||||
})
|
||||
if (this.call) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.text
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-text__wrap {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.fui-text__active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-text__active:active {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-text__inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.fui-text__block {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fui-text__unshrink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fui-text__content {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-text__nvue{
|
||||
flex: 1;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.fui-text__center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-text__right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-text__primary {
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
.fui-text__success {
|
||||
color: var(--fui-color-success, #09BE4F) !important;
|
||||
}
|
||||
|
||||
.fui-text__warning {
|
||||
color: var(--fui-color-warning, #FFB703) !important;
|
||||
}
|
||||
|
||||
.fui-text__danger {
|
||||
color: var(--fui-color-danger, #FF2B2B) !important;
|
||||
}
|
||||
|
||||
.fui-text__purple {
|
||||
color: var(--fui-color-purple, #6831FF) !important;
|
||||
}
|
||||
|
||||
.fui-text__gray {
|
||||
color: var(--fui-color-label, #B2B2B2) !important;
|
||||
}
|
||||
|
||||
.fui-text__black {
|
||||
color: var(--fui-color-title, #181818) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
Reference in New Issue
Block a user