一、 App.vue
<template>
<div id="myapp">
<!-- 第1行 -->
<MenuRow>
<template slot="left" scope="menuName">
<span class="menu_1"> {{ menuName.menuName[0] }} </span>
</template>
<template slot="center" scope="menuName">
<span class="menu_1"> {{ menuName.menuName[1] }}</span>
</template>
<template slot="right" scope="menuName">
{{ menuName.menuName[2]}}
</template>
</MenuRow>
</div>
</template>
<script>
// 引入组件
import MenuRow from "./components/MenuRow.vue";
// 注册组件
export default {
name: "App",
components: {
MenuRow,
},
data() {
return {
};
},
methods: {
getInfo(a, b) {
this.appSchoolName = a;
this.appAddress = b;
},
},
};
</script>
<style scoped>
body {
margin: 0;
padding: 0;
background-color: rgb(147, 149, 149);
}
#myapp {
background-color: cornflowerblue;
/* border: 1px rgb(134, 0, 0) dashed; */
/* height: 400px; */
/* padding-top: 20px; */
/* padding-left: 10px; */
/* background-color: aqua; */
}
.menu_1 {
color: red;
}
</style>
二、MenuRow.vue
<template>
<div class="row">
<div class="left">
<slot name="left" :menuName="menuName" > 默认left</slot>
<slot name="center" :menuName="menuName" >默认center</slot>
</div>
<div class="right">
<slot name="right" :menuName="menuName"></slot>
</div>
</div>
</template>
<script>
export default {
name: "MyItem",
data() {
return {
menuName: ["★", "头像名称修改", ">"],
};
},
methods: {
m_click(m_id) {
this.changChecked(m_id);
},
delete_click(m_id) {
this.deleteChecked(m_id);
},
},
};
</script>
<style scoped>
body {
margin: 0;
padding: 0;
}
.row {
height: 40px;
width: 100%;
border-bottom: 1px rgb(237, 235, 235) solid;
/* margin-bottom: 5px; */
display: flex;
flex-direction: row;
background-color: rgb(250, 244, 235);
}
.row div:nth-child(1) {
width: 0;
flex-grow: 8;
/* background-color: blueviolet; */
line-height: 40px;
padding-left: 15px;
/* margin-left: 0px; */
/* padding-right: -15px; */
}
.row div:nth-child(2) {
width: 0;
flex-grow: 1;
text-align: center;
/* background-color: aquamarine; */
line-height: 35px;
font-size: 22px;
}
</style>
