You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
crmeb_html/components/BaseMoney.vue

102 lines
2.0 KiB

12 months ago
<template>
<view :class="{ line: line, weight: weight }"
:style="{color: '#' + incolor,fontWeight: fontWeight, display:(discount || inline) ? 'inline-block' : 'block', fontFamily: line?'Futura-Light':'Futura' }"
class="base-money">
<text v-if="!discount" class="symbol" :style="{'font-size': symbolSize +'rpx'}"></text><text class="integer"
:style="{'font-size': integerSize +'rpx'}">{{ integer }}</text>
<text v-if="digits && decimal != '00' && decimal != '0'" class="decimal"
:style="{'font-size': decimalSize +'rpx'}">.{{ decimal }}</text>
</view>
</template>
<script>
export default {
name: 'BaseMoney',
props: {
// 小数位数,为0则不显示
digits: {
type: Number,
default: 2
},
fontWeight: {
type: Number | String,
default: 'inherit'
},
money: {
type: String,
default: ""
},
// 删除线
line: {
type: Boolean,
default: false
},
// 粗体
weight: {
type: Boolean,
default: false
},
incolor: {
type: String,
default: '424242'
},
symbolSize: {
type: String,
default: '20'
},
integerSize: {
type: String,
default: '26'
},
decimalSize: {
type: String,
default: '24'
},
discount: {
type: Boolean,
default: false
},
inline: {
type: Boolean,
default: false
}
},
data() {
return {
integer: 0,
decimal: 0
};
},
watch: {
money: {
handler(newValue, oldValue) {
let value = Number(newValue).toFixed(this.digits);
value = value.split('.');
this.integer = value[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if (value[1]) {
this.decimal = (value[1].length == 2 && value[1].charAt(1) != 0) ? value[1] : (value[1].charAt(
0) || 0);
}
},
immediate: true
}
}
}
</script>
<style lang="scss" scoped>
.base-money {
font-family: Futura;
// display: inline-block;
&.line {
text-decoration: line-through;
}
&.weight {
font-weight: 500;
}
}
</style>