64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<template>
|
|
<view class="price-root">
|
|
<text v-if="isSymbol" class="money">{{ symbol }}</text>
|
|
<text class="number">{{ money }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
/**
|
|
* jx-price 组件
|
|
* @param (symbol) ¥ 占位符
|
|
* @param (isSymbol) 是否显示 ¥ 符号 默认显示
|
|
* @emit (isMoney) 是否格式化
|
|
* @param (price) 金钱
|
|
* @param (color) 颜色
|
|
* @param (size) 大小
|
|
*/
|
|
import { computed } from 'vue'
|
|
|
|
interface priceType {
|
|
symbol?: string
|
|
isSymbol?: boolean
|
|
isMoney?: boolean
|
|
price?: number | string
|
|
color?: string
|
|
size?: string
|
|
sizeM?: string
|
|
sizeN?: string
|
|
}
|
|
const props = withDefaults(defineProps<priceType>(), {
|
|
symbol: '¥',
|
|
isSymbol: true,
|
|
price: '0',
|
|
isMoney: true,
|
|
color: '#969696',
|
|
size: '32rpx',
|
|
sizeM: '32rpx',
|
|
sizeN: '32rpx',
|
|
})
|
|
|
|
const money = computed(() => {
|
|
if (props.isMoney) {
|
|
return (+props.price / 100).toFixed(2)
|
|
} else {
|
|
return props.price
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.price-root {
|
|
display: inline-block;
|
|
color: v-bind(color);
|
|
font-size: v-bind(size);
|
|
}
|
|
|
|
.money {
|
|
font-size: v-bind(sizeM);
|
|
}
|
|
|
|
.number {
|
|
font-size: v-bind(sizeN);
|
|
}
|
|
</style> |