溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
錯誤代碼：
子組件：
<template>
<div v-show="showMine">
<div class="mask" @click.self="onMask"></div>
<transition name="slide-fade">
<div class="my_group" v-if="showMine">我的</div>
</transition>
</div>
</template>
<script>
export default {
name: "mine",
props: ["showMine"],
data() {
return {};
},
methods: {
onMask() {
this.$emit("onMask");
}
}
};
</script>
<style lang="less" scoped>
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.1);
z-index: 10;
}
.my_group {
width: 60%;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
position: fixed;
z-index: 11;
}
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(-100%);
transition: all 0.3s ease;
}
</style>
父組件：
<template>
<div class="headers">
<div class="nav">
<div class="mine" @click="onMine">
<i class="cubeic-person"></i>
</div>
<div class="city">
深圳市
<i class="cubeic-pulldown"></i>
</div>
<div class="info">
<i class="cubeic-message"></i>
</div>
</div>
<app-mine :showMine="showMine" @onMask="onMask" />
</div>
</template>
<script>
import appMine from "../Mine";
export default {
name: "headers",
components: {
"app-mine": appMine
},
data() {
return {
showMine: false
};
},
methods: {
onMine() {
this.showMine = true;
},
onMask() {
this.showMine = false;
}
}
};
</script>
<style lang="less" scoped>
.nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 1.066667rem;
padding: 0 0.266667rem;
box-sizing: border-box;
font-size: 0.48rem;
.city {
font-size: 0.373333rem;
color: #7e7e7e;
}
}
.mine,
.info,
.city {
height: 100%;
line-height: 1.066667rem;
}
</style>
效果：
修改代碼只要把子組件中的的showMine放在mask元素中就可以
效果:
以上這篇vue transition 在子組件中失效的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
