yd-text-price.vue
1.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
<view>
<text v-for="(item, index) in textArray" :key="index" :style="{ fontSize: (index === 1 ? integerSize : size) + 'px', color, textDecoration }">
{{ item }}
</text>
</view>
</template>
<script>
/**
* 此组件简单的显示（驼峰式）的价格
*/
export default {
name: 'yd-text-price',
components: {},
props: {
//货币符号
symbol: {
type: String,
default: '￥'
},
price: {
type: [String, Number],
default: ''
},
color: {
type: String,
default: '#333333'
},
//字体大小
size: {
type: [String, Number],
default: 15
},
//整形部分字体大小可单独定义
intSize: {
type: [String, Number],
default: ''
},
//文字装饰，下划线，中划线等
decoration: {
type: String,
default: 'none'
}
},
data() {
return {
textDecoration: this.decoration
}
},
computed: {
textArray() {
let array = []
if (this.price === '' || this.price === undefined) {
return []
}
array.push(this.symbol)
if (!/^\d+(\.\d+)?$/.test(this.price)) {
console.error('组件<yd-text-price :text="???" 此处参数应为金额数字')
} else {
let arr = parseFloat(this.price).toFixed(2).split('.')
array.push(arr[0])
array.push('.' + arr[1])
}
return array
},
integerSize() {
return this.intSize ? this.intSize : this.size
}
}
}
</script>
<style scoped></style>