el+vue 实战 ⑨ el-button按钮悬浮、el-button按钮背景图片自定义、el-button按钮点击之后样式复原

一、el-button按钮悬浮

① 样式设置：将position设置为fixed，然后用margin调整位置即可。

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

二、el-button按钮设置背景图片

① 样式设置

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

② 按钮常态：

.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;
}

 ③ 按钮鼠标悬浮时状态：

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

④ 按钮点击状态：

这里通过调整border宽度的方式，让按钮点击这个操作有一点页面上的反馈。

这里border-color最好自己给一个值，不然会是默认的蓝色。

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

 ⑤ el-button按钮点击之后样式复原问题，特别是带背景图片的按钮，点击之后鼠标再悬停上去，会导致图片无法正常加载，解决方法就是给这个按钮设置一个id，并在这个按钮的点击事件中，做一些处理。

<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();
},