Hover/click event dynamically changes color and background color
Hover and click events coexist, dynamically change the background color and text color of the button, and there is no need to use the class class to add or delete. The class class is written in a style that is hard, and the experience is not good!
1. Parent component content
<!-- :changeColorFor incoming color data -->
<head-bar-item path="/home" :changeColor="{color: '#dc5d48', bgColor: '#373833'}">
<template v-slot:item-text>front page</template>
</head-bar-item>
<head-bar-item path="/category">
<template v-slot:item-text>Classification</template>
</head-bar-item>
2. Subcomponent content (coordinate with routing jump)
<template>
<span
class="tab-bar-item"
:style="changeStyle"
@click="itemClick"
@mouseover="itemHover"
@mouseout="removeHover"
>
<slot name="item-text"></slot>
</span>
</template>
<script>
export default {
name: "HeadBarItem",
props: {
path: String,
changeColor: {
type: Object,
default() {
return { color: "#dc5d48", bgColor: "#373833" };
},
},
},
data() {
return {
isHover: false,
};
},
computed: {
isActive() {
return this.$();
},
//Calculate attributes to change color core //Process: If the button is clicked, it is the color passed by the user. Otherwise, it will be changed when determining whether the mouse is moved in. If it is moved in, it will change color, otherwise it is the default value changeStyle() {
return {
color:
?
:
?
: "#f8f8f2",
backgroundColor:
?
:
?
: "#545453",
};
},
},
methods: {
itemClick() {
//Click to achieve routing jump this.$();
},
itemHover() {
= true;
},
removeHover() {
= false;
},
},
};
</script>
Vue page background color modification
Due to the single page application of vue, our project has only one file. However, if we want to change the background color of the page, the wine must dynamically change the background color of the body to be the most intuitive and effective solution.
Without saying much nonsense, just upload the code, and personally test it is 100% effective:
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted(){},
methods: {},
//Hook function before instance creation--add inline style to body beforeCreate () {
this.$nextTick(()=>{
('style', 'background:#EAECF1')
})
},
//The hook before instance is destroyed--removed the property style of the body tag beforeDestroy () {
('style')
}
};
</script>
<style lang="scss" scoped></style>The following is why we need to wrap this.$nextTick hook inside the beforeCreate hook. The function of this.$nextTick is to complete the dom loading, so we change the background color of the body to operate the dom
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.