不管是移入,或者是点击事件
都要知道是触发的哪个组件
这里子组件是个通用小标题title
所以,通过标题内容,获取触发的哪个子组件
子组件
<template>
<div @mouseover="tMouseover" @mouseleave="tMouseLeave" class="title-wrap" @click="changeImg"
:style="title === '铁路' || title === '公路' || title === '水路' || title === '综合交通枢纽' || title === '公共交通发展' || title === '道路运输' ? 'cursor: pointer;' : ''">
<span class="text">{{ title }}</span>
<div class="title-right">
<div v-if="!selectShow">
<!-- <span class="num">129</span>
<span class="unit">件</span> -->
</div>
<div v-else>
<el-select v-model="sValue" placeholder="请选择" size="mini" @change="change">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
default: () => []
},
title: {
type: String,
default: ''
},
selectShow: {
type: Boolean,
default: false
}
},
data() {
return {
sValue: '',
a: true
}
},
mounted() {
this.sValue = this.options[0] ? this.options[0].label : null
},
methods: {
tMouseover() {
console.log(this.title);
// 通过title可以知道触发某个子组件标题
this.$emit("overtitle", this.title)
},
tMouseLeave() {
this.$emit("overtitle", false)
},
changeImg() {
this.$emit("sImg", this.title)
},
change(e) {
console.log(e, 'e');
this.$emit("sValue", this.sValue, this.options[0].label)
}
}
}
</script>
<style lang="scss" scoped>
.title-wrap {
// width: 25.625rem;
padding: 8px 0;
background: url('@/assets/images/组 8461@2x.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
// cursor: pointer;
.text {
margin-left: 1.5rem;
font-size: 20px;
font-weight: bold;
}
.title-right {
margin-right: 1rem;
.num {
font-size: 14px;
font-family: MiSans, MiSans;
font-weight: 500;
color: #F3AE30;
}
.unit {
font-size: 12px;
font-family: MiSans, MiSans;
font-weight: 500;
color: #fff;
margin-left: .3125rem;
}
.el-select {
width: 9.375rem;
}
::v-deep .el-input--mini .el-input__inner {
background: transparent;
color: #fff;
border: 1px solid #093B9E;
}
}
}
</style>
父组件
<Box :widht="clientWidth === 3840 ? '40rem' : ''" @sImg="sImg" @overtitle='overtitle' :selectShow="false"
:title="'铁路'" style="left: 1.25rem;transition: left 1s ease-in-out;"
:style="leftShowLength ? 'left:-25.625rem' : ''">
</Box>