用uniapp写一个账单明细组件
时间: 2024-02-03 07:14:30 浏览: 36
好的,以下是一个简单的账单明细组件示例:
```html
<template>
<div class="bill-detail">
<div class="title">{{ title }}</div>
<div class="list">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="name">{{ item.name }}</div>
<div class="amount">{{ item.amount }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "账单明细"
},
list: {
type: Array,
default: () => []
}
}
}
</script>
<style>
.bill-detail {
background-color: #fff;
padding: 10px;
border-radius: 5px;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.name {
font-size: 16px;
}
.amount {
font-size: 16px;
color: #f00;
}
</style>
```
使用示例:
```html
<template>
<div>
<bill-detail :list="billList" />
</div>
</template>
<script>
import BillDetail from '@/components/BillDetail.vue'
export default {
components: {
BillDetail
},
data() {
return {
billList: [
{
name: '商品1',
amount: '¥10.00'
},
{
name: '商品2',
amount: '¥20.00'
}
]
}
}
}
</script>
```
这个组件接受两个 props,分别是 `title` 和 `list`。其中 `title` 是组件的标题,`list` 是账单明细列表数组。在组件内部,使用了 flex 布局和一些简单的样式来展示账单明细。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)