I. Introduction – Problem description 🌟
When we move the mouse to a certain area and hover displays the function icon, we click the icon to pop up the function menu, but when the mouse moves out of the hover area or moves to the pop-up function menu, the original function icon disappears, which is obviously not the effect we need, the effect is as follows:
2. Solution 🙉
solution
We create a class that matches the style of the Hover action. When we click the function icon to pop up the function menu, we add this class to the HOVER dom element, and when the function menu popup disappears, we remove the class.
The specific implementation
Let’s look at the HTML structure of the GIF above:
App_id = ‘app_id’; app_id = ‘app_id’; app_id = ‘app_id’; When we hover over each app-item, the dom of the app-item class=”app-options” is displayed. The APP-Options contains a DOM node with class=”more-btn”. This node uses ElementUI’s Dropdown component, which is displayed when more-bTN is clicked.
<ul class="app-list">
<li class="app-item" :ref="'app'+item.app_id" v-for="item in appList" :key="item.app_id" @click="toAppManage(item.app_id)">
<div class="ipu-flex">
<img class="app-logo" :src="item.app_logo">
<div class="ipu-flex ipu-flex-vertical ipu-flex-justify-space ipu-flex-grow-1">
<div class="app-name">{{item.app_name}}</div>
<div class="create-time">{{item.create_date}}</div>
</div>
</div>
<div class="app-description">{{item.app_desc}}</div>
<div class="ipu-flex-grow-1"></div>
<div class="app-options" @click.stop>
<el-tooltip effect="dark" content="Preview" placement="top" :enterable="false">
<i class="ri-eye-fill"></i>
</el-tooltip>
<el-dropdown trigger="click" @command="onAppAction" placement="bottom-start" @visible-change="visibleChange($event, item.app_id)">
<div class="more-btn">
<i class="ri-more-fill"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="ipu-flex-middle" :command="{type:'set', appId: item.app_id}">
<span class="child-action-name">Application Settings</span>
</el-dropdown-item>
<el-dropdown-item class="ipu-flex-middle" :command="{type:'delete', appId: item.app_id}">
<span class="child-action-name">Delete the application</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</li>
</ul>
Copy the codeLook at the CSS part of the code, CSS part of the SCSS preprocessor written:
App-options in normal state due to transform: translateY(42px); We moved it 42px down to hide, and when the mouse moves over the. App-item we set its hover event to transform: translateY(4px); App-options is displayed because it moves up, and we define a.select style on.app-item that matches the hover event style.
.app-list {
margin-top: 30px;
display:flex;
flex-wrap: wrap;
gap: 20px;
.app-item {
overflow: hidden;
cursor: pointer;
position: relative;
width: 258px;
height: 206px;
padding:20px;
background: #FFFFFF;
border: 1px solid #F2F6FC;
border-radius: 4px;
display: flex;
flex-direction: column;
&:hover {
box-shadow: 0px 2px 12px rgba(0.0.0.0.06);
.app-options {
transform: translateY(4px); }} &.select {
box-shadow: 0px 2px 12px rgba(0.0.0.0.06);
.app-options {
transform: translateY(4px); }}.app-logo {
background: #fff;
border-radius: 6px;
width: 50px;
height: 50px;
margin-right: 14px;
}
.app-name {
font-size: 16px;
line-height: 24px;
color: # 606266;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.create-time {
font-size: 14px;
line-height: 22px;
color: rgba(0.0.0.45);
}
.app-description {
margin-top: 19px;
font-size: 12px;
line-height: 20px;
color: # 909399;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.app-options {
align-self: flex-end;
display: flex;
justify-content: flex-end;
transform: translateY(42px);
transition: transform .3s ease-in-out;
i {
font-size: 20px;
line-height: 20px;
color: rgba(144.147.153.1);
}
.more-btn {
margin-left:20px; }}}}Copy the codeJS part combing:
ElementUI’s Dropdown component can listen for visible-change events to get the state of the dropdown menu, true if it appears, false if it hides. So we add @visible-change=”visibleChange($event, item.app_id) to the component and pass in app_id. We can find the corresponding DOM node by app_id, and then add or remove select styles to the DOM node based on the state of the drop-down menu.
visibleChange(e, appId) {
if (e) {
this.$refs['app' + appId][0].classList.add('select')}else {
this.$refs['app' + appId][0].classList.remove('select')}}Copy the codeFinally, when the mouse moves out of the Hover area or to the hover area after the function menu is popped up, the function icon in the hover area will not disappear, as shown below:
3. Conclusions and inferences ✨
Create a class that matches the style of the Hover action. When we click the function icon to pop up the function menu, we add this class to the HOVER dom element, and when the function menu popup disappears, we remove this class. We use this to achieve the desired effect, such as ElementUI Popover components, Tooltip text prompt components, we want to move to the pop-up box, text prompt area, the original hover icon does not disappear, use this technique