94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<span
|
|
:style="{ color, 'font-weight': weight }"
|
|
:class="(lineThrough ? 'line-through' : '') + 'price-format'"
|
|
>
|
|
<span
|
|
v-if="showSubscript"
|
|
:style="{
|
|
'font-size': subscriptSize + 'px',
|
|
'margin-right': '1px',
|
|
}"
|
|
>¥</span
|
|
>
|
|
<span
|
|
:style="{ 'font-size': firstSize + 'px', 'margin-right': '1px' }"
|
|
>{{ priceSlice.first }}</span
|
|
>
|
|
<span
|
|
v-if="priceSlice.second"
|
|
:style="{ 'font-size': secondSize + 'px' }"
|
|
>.{{ priceSlice.second }}</span
|
|
>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
priceSlice: {},
|
|
}
|
|
},
|
|
components: {},
|
|
props: {
|
|
firstSize: {
|
|
type: Number,
|
|
default: 14,
|
|
},
|
|
secondSize: {
|
|
type: Number,
|
|
default: 14,
|
|
},
|
|
color: {
|
|
type: String,
|
|
},
|
|
weight: {
|
|
type: [String, Number],
|
|
default: 400,
|
|
},
|
|
price: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
showSubscript: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
subscriptSize: {
|
|
type: Number,
|
|
default: 14,
|
|
},
|
|
lineThrough: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
created() {
|
|
this.priceFormat()
|
|
},
|
|
watch: {
|
|
price(val) {
|
|
this.priceFormat()
|
|
},
|
|
},
|
|
methods: {
|
|
priceFormat() {
|
|
let { price } = this
|
|
let priceSlice = {}
|
|
if (price !== null) {
|
|
price = String(price).split('.')
|
|
priceSlice.first = price[0]
|
|
priceSlice.second = price[1]
|
|
this.priceSlice = priceSlice
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.price-format {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
</style> |