element-UI button按鈕顏色回顯(一)

按鈕：

<el-button id="manyou" @click="Ismovement" type="primary" >漫游模式</el-button>

樣式：

  /* 逗號表示A,B兩個標簽同時擁有大括弧中的CSS樣式 */
  .el-button--primary.is-active,

  /* active狀態：滑鼠左鍵按住按鈕，但是沒有放開（對應問題部分的3狀態）
  其實按住的時候，hover狀態也還在，所以是兩個狀態共存 */
  .el-button--primary:active {
    background: rgb(230, 162, 60);
    border-color: rgb(230, 162, 60);
    color: #fff;
  }
 
  /* focus狀態：獲得聚焦時，其實也就是按了左鍵放開之後，主要用於文本框輸入文字時 */
  .el-button--primary:focus,

  /* hover狀態：滑鼠懸停和划過時 */
  .el-button--primary:hover {
    background: rgb(230, 162, 60);
    border-color: rgb(230, 162, 60);
    color: #fff;
  }

顏色回顯：

document.getElementById("manyou").blur();

這裡我用了一個布爾類型變數來標記當前是否點擊，初始值為false，每次點擊後取反，當其為false的時候執行上述代碼