element-UI button按钮颜色回显(一)

  • element-UI button按钮颜色回显(一)已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

按钮:样式: 颜色回显:这里我用了一个布尔类型变量来标记当前是否点击,初始值为false,每次点击后取反,当其为false的时候执行上述代码

按钮:

<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的时候执行上述代码