vue 写一个图例组件
时间: 2023-07-01 13:21:21 浏览: 40
好的,下面是一个简单的 Vue 图例组件示例:
```html
<template>
<div class="legend">
<div v-for="(item, index) in items" :key="index" class="legend-item">
<div class="legend-color" :style="{ backgroundColor: item.color }"></div>
<div class="legend-label">{{ item.label }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
default: () => []
}
}
}
</script>
<style scoped>
.legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.legend-item {
display: flex;
align-items: center;
margin-right: 20px;
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 5px;
}
.legend-label {
font-size: 14px;
}
</style>
```
这个组件接受一个 `items` 属性,该属性是一个数组,每个数组元素包含 `label` 和 `color` 两个属性,用于表示图例的标签和颜色。
您可以在父组件中使用这个组件,并传递一个 `items` 数组作为属性,例如:
```html
<template>
<div>
<legend :items="legendItems" />
</div>
</template>
<script>
import Legend from './Legend.vue'
export default {
components: {
Legend
},
data() {
return {
legendItems: [
{ label: '图例1', color: 'red' },
{ label: '图例2', color: 'blue' },
{ label: '图例3', color: 'green' }
]
}
}
}
</script>
```
这样,您就可以在页面上看到一个包含三个图例的组件。