el+vue actual combat ⑨ el-button button suspension, el-button button background image customization, el-button button style restoration after clicking

1. el-button button suspension

① Style setting: Set position to fixed, and then use margin to adjust the position.

<el-button
   style="position: fixed; margin-left: 94%; margin-top: -24%"
></el-button>

2. Set the background image of the el-button button

① Style setting

<el-button
    id="message_btn"
    style="position: fixed; margin-left: 94%; margin-top: -24%"
    class="el-icon-liuyanban"
    @click="handleMessageBoard"
></el-button>

② Button normal state:

.el-icon-liuyanban {
  // background: url("~@/assets/icon/home/icon_liuyanban_nor.png");
  background: url("../assets/icon/home/icon_liuyanban_nor.png");
  width: 57px;
  height: 57px;
  border: 2px dashed;
  border-radius: 0px;
}

 ③ Button status when mouse is hovering:

.el-icon-liuyanban:hover {
  background: url("~@/assets/icon/home/icon_liuyanban_sel.png");
}

④ Button click status:

Here, by adjusting the border width, the button click operation has a little feedback on the page.

It is best to give a value for border-color here, otherwise it will be the default blue.

.el-icon-liuyanban:active {
  border: 3px dashed;
  border-color: rgb(233, 227, 227);
}

 ⑤ The problem of style restoration after the el-button button is clicked, especially the button with a background image. After clicking and hovering the mouse, the image cannot be loaded normally. The solution is to set an id for the button and click it on the button. In the event, do some processing.

<el-button
    id="message_btn"
    style="position: fixed; margin-left: 94%; margin-top: -24%"
    class="el-icon-liuyanban"
    @click="handleMessageBoard"
></el-button>


handleMessageBoard() {
    document.getElementById("message_btn").blur();
},