一、封装Items
完整代码如下
<template>
<div class="container">
<div v-for="(item, index) in items" :key="index" class="item-box">{{ item }}
</div>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
// default: ,
}
},
};
</script>
<style>
.container {
/* display: flex; */
/* 设置容器为flex布局 */
/* justify-content: space-between; */
/* 水平居中显示子项 */
}
.item-box {
width: 100px;
/* 设置每个div的宽度 */
height: 30px;
/* 设置每个div的高度 */
background-color: forestgreen;
/* 设置每个div的背景色 */
margin-top: 7px;
margin-left: 3px;
/* 设置每个div之间的外边距 */
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 500;
border-style: ridge;
border-width: 2px;
border-color: #0085AA;
}
</style>
二、调用Items
<template>
<div class="Locationmap">
<Items :items="items1"></Items>
<Items :items="items2"></Items>
<Items :items="items3"></Items>
</div>
</template>
<script>
import Items from "./Items.vue";
export default {
components: {
Items
},
data() {
return {
items1: [
"1-1-1",
"1-1-2",
"1-1-3",
"1-1-4",
"1-2-1",
"1-2-2"
],
items2: [
"2-1-1",
"2-1-2",
"2-1-3",
"2-2-1",
"2-2-2",
"2-2-3"
],
items3: [
"3-1-1",
"3-1-2",
"3-1-3",
"3-1-4",
"3-1-5",
"3-2-1",
"3-2-2"
]
};
},
};
</script>
<style scoped>
.Locationmap {
position: relative;
height: 763px;
width: 100%;
margin-top: 30px;
margin-left: 0px;
display: flex;
}
</style>
效果如下: