526互联

关于element-plus框架一些样式的修改

发布时间 2023-09-15 09:33:46作者: antguo

一、关于使用element框架一些测试建议覆盖的样式

1.取消按钮的focus效果

(1) css样式覆盖

// element按钮部分伪类样式覆盖
// 用于覆盖element按钮focus的样式
.el-button:not(.is-link):not(.is-text):not(.is-disabled):not(.is-has-bg):focus{
  color: var(--el-button-text-color) !important;
  background-color: var(--el-button-bg-color) !important;
  border-color: var(--el-button-border-color) !important;
}
// 用于保留element按钮hover和active的样式
.el-button:not(.is-link):not(.is-text):not(.is-disabled):not(.is-has-bg):hover{
  color: var(--el-button-hover-text-color) !important;
  background-color: var(--el-button-hover-bg-color) !important;
  border-color: var(--el-button-hover-border-color) !important;
}
.el-button:not(.is-link):not(.is-text):not(.is-disabled):not(.is-has-bg):active{
  color: var(--el-button-active-text-color) !important;
  background-color: var(--el-button-active-bg-color) !important;
  border-color: var(--el-button-active-border-color) !important;
}
// link
.el-button.is-link:not(.is-disabled):focus{
  color: var(--el-button-text-color) !important;
}
.el-button.is-link:not(.is-disabled):hover{
  color: var(--el-button-hover-link-text-color) !important;
}
.el-button.is-link:not(.is-disabled):active{
  color: var(--el-button-active-color) !important;
}
// text
.el-button.is-text:not(.is-disabled):not(.is-has-bg):focus{
  color: var(--el-button-text-color) !important;
  background-color: transparent !important;
}
.el-button.is-text:not(.is-disabled):not(.is-has-bg):hover{
  background-color: var(--el-fill-color-light) !important;
}
.el-button.is-text:not(.is-disabled):not(.is-has-bg):active{
  background-color: var(--el-fill-color) !important;
}
// bg
.el-button.is-has-bg:not(.is-disabled):focus{
  color: var(--el-button-text-color) !important;
  background-color: var(--el-fill-color-light) !important;
}
.el-button.is-has-bg:not(.is-disabled):hover{
  background-color: var(--el-fill-color) !important;
}
.el-button.is-has-bg:not(.is-disabled):active{
  background-color: var(--el-fill-color-dark) !important;
}

(2) js失焦事件

const onClick = (e) => {
    let target = e.target
    if (e.target.nodeName == 'SPAN') {
      target = e.target.parentNode
    }
    target.blur()
}

2.针对disable的input，添加文字省略样式

.el-input.is-disabled .el-input__inner {
  text-overflow: ellipsis;
}

二、一些个性化样式

1.collapse组件箭头添加文字，修改箭头角度

:deep(.el-collapse-item) {
  border: 1px solid;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}
// 阻止点击header触发开关事件
:deep(.el-collapse-item__header) {
  pointer-events: none;
}
:deep(.el-collapse-item__arrow) {
  font-style: normal;
  font-weight: initial;
  font-size: 14px;
  transform: rotate(0deg); // 添加了文字，不需要旋转
  color: #409eff;
  pointer-events: initial; // 箭头位置允许触发开关事件
  // 关闭窗口，箭头图标旋转样式
  svg {
    transform: rotate(90deg);
    transition: 300ms;
  }
}
:deep(.el-collapse-item__arrow.is-active) {
  // 打开窗口，箭头图标旋转样式
  svg {
    transform: rotate(-90deg);
    transition: 300ms;
  }
}
// 关闭窗口文字
:deep(.el-collapse-item__arrow:before) {
  content: '展开';
  padding-right: 4px;
}
// 打开窗口文字
:deep(.el-collapse-item__arrow.is-active:before) {
  content: '收起';
  padding-right: 4px;
}
// 增加宽度显示完整文字和图标
:deep(.el-collapse-item__arrow) {
  min-width: 55px;
}

2.自定义封装 MessageBox 样式

import { ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { h } from 'vue'
/**
 * 确认提示窗
 * @param {*} title 标题
 * @param {*} message 描述
 * @returns
 */
const confirm = (title, message) => {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm('', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false, // 取消自动获得焦点
      'show-close': false,
      message: () =>
        h(
          'div',
          {
            style: `display: flex;align-items: ${
              message ? 'flex-start' : 'center'
            };`
          },
          [
            h(
              'div',
              { style: `height:24px;${message ? 'margin-top:-3px;' : ''}` },
              [
                h(QuestionFilled, {
                  color: '#ffbf00',
                  style: 'width:24px;height:24px;padding-right:10px;'
                })
              ]
            ),
            h('div', null, [
              h('div', { class: 'el-message-box__title' }, [
                h('span', { style: 'word-break: break-all;' }, `${title}`)
              ]),
              h(
                'p',
                { style: `padding-top:8px;display:${message ? '' : 'none'}` },
                `${message}`
              )
            ])
          ]
        )
    })
      .then(() => {
        resolve()
      })
      .catch((e) => {
        console.log(e)
      })
  })
}

export { confirm }