el + vue combate real ⑨ suspensión del botón el-button, personalización de la imagen de fondo del botón el-button, restauración del estilo del botón el-button después de hacer clic

1. suspensión del botón el-botón

① Configuración de estilo: establezca la posición en fija y luego use el margen para ajustar la posición.

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

2. Establezca la imagen de fondo del botón el-button

① Configuración de estilo

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

② Estado normal del botón:

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

 ③ Estado del botón cuando el mouse está sobre el cursor:

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

④ Estado del clic del botón:

Aquí, al ajustar el ancho del borde, la operación de hacer clic en el botón tiene una pequeña retroalimentación en la página.

Es mejor dar aquí un valor para el color del borde; de ​​lo contrario, será el azul predeterminado.

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

 ⑤ El problema de la restauración del estilo después de hacer clic en el botón "el", especialmente el botón con una imagen de fondo. Después de hacer clic y pasar el mouse, la imagen no se puede cargar normalmente. La solución es establecer una identificación para el botón y hacer clic en él. en el botón En el caso, realice algún procesamiento.

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