1. 更改框架内置样式(element ui)

① 全局 css 中修改

  这里分为两种,可以写在全局第三方样式文件element-ui.scss中,然后再

//项目样式入口文件index.scss中
@import './element-ui.scss';

//同时在main.js中
import 'element-ui/lib/theme-chalk/index.css'

//即可自定义框架样式

  另一种方法,则是在局部vue中覆盖,同样也是全局生效,如果是要全局修改还是统一写在全局style中比较好,出现奇怪问题时更容易找到问题所在,示例如下:

<style lang="scss">
  .el-table .cell {
      white-space: pre-line;
    }
    .el-table {
      .el-table__header {
        tr {
          th {
            border-left: 1px solid #0cc !important;
            border-right: 0 !important;
            &:last-child {
              border-left: 0 !important;
            }
          }
        }
      }
    }
  }
</style>
② 局部 vue 中修改

  与全局覆盖区分,局部修改的方法参考第4点内容,要使它生效又不污染其他地方同样的组件的话,需采用 >>> /deep/在框架组件的class名前方。


2. 自适应屏幕(@media 标签)

  一般这种适应不止宽高,还有间距,大小等一些复杂的样式,这时候需要采用@media标签来监测屏幕宽度从而筛选不同的样式进行适配。举例如下:

@media screen and (max-width: 1000px) {
  .navbar {
    .menu-wrap {
      margin-left: -50px !important;
      font-size: 14px !important;
    }
  }
}

@media screen and (max-width: 380px) {
  .navbar {
    .menu-wrap {
      margin-left: -20px !important;
      font-size: 12px !important;
    }
  }
}

//min-width要从小到大从上到下写
//max-width要从大到小从上到下写
//这么做只是为了方便维护

3. !important 样式覆盖

  关于!important这个标识,要慎用,因为优先级是最高的。比行内style的属性还要高,所以用一般方式覆盖不掉的话,才考虑用!important。
   如果要!important覆盖掉样式,然后又需要在嵌套里面修改的话,同样也需要带上!important,否则不会生效的。举例如下:

.el-table {
  height: calc(100vh - 300px) !important;
}

.el-table__body-wrapper {
  height: calc(100vh - 263px) !important;
}
//这里是更改el-table的高以及body里面数据的高,定死后
// el-table的max-height属性失效
//

4. >>> 与 /deep/

  在我们使用vue编写页面的时候,如果有引用第三方组件,又想改它内置的样式且只影响当前页,最好的方法就是采用>>>,有些如果无法解析>>>,可考虑加/deep/修饰符进行穿透,实例如下:

//这种情况相对于第一种是只影响当前页
<style lang="scss" scoped>
  //不起作用时,考虑/deep/替代>>>位置
  >>> .el-table {
    padding: 5px;
    .el-table__header {
      background-color: rgba(0, 33, 91, 0.5);
    }
  }
  //这里如果没有>>>,即使是在上一层套个div,自命名class也不会起作用
</style>

<style lang="scss">
  .el-table {
    padding: 5px;
    .el-table__header {
      background-color: rgba(0, 33, 91, 0.5);
    }
  }
  //这种写法的话跟在全局文件写一样效果,会造成污染其他地方的样式
</style>

5. el-textarea 设置 min-height:100%不生效

  引入第三方ui组件,如el-input后,要做自适应的文本域,但是一开始即使文本内容很少也要铺满区域时,需要设置高度,这里通过更改内置样式的min-height达到该目的,示例如下:

<template>
  <div class="text">
    <el-input
      type="textarea"
      placeholder="请输入内容"
      v-model="textarea1"
      autoresize
    >
    </el-input>
  </div>
</template>

<style scoped lang="scss">
  .text {
    display: flex; //要在textarea套上一层标签,设置为弹性盒子布局即可达到目的
  }

  >>> . el-textarea {
    .el-textarea__inner {
      min-height: 100% !important;
    }
  }
</style>

6. 自适应宽高

  如果只是简单的需要自适应宽高而不用改其他样式的话,可以采取js控制或者是css里的calc属性来进行调整。

js
<template>
  <div>
    <el-table :data="datalist" :border="false" :max-height="tableHeight">
      <el-table-column
        prop="name"
        label="名字"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        align="center"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="primary" @click="edit(row)">修改</el-button>
          <el-button type="danger" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableHeight: 400,
        //省略balabala变量
      };
    },
    methods: {
      edit(row) {
        //执行修改逻辑
      },

      del(row) {
        //执行删除逻辑
      },
    },
    mounted() {
      this.tableHeight = window.innerWidth >= 1600 ? 400 : 100;
      window.onresize = () => {
        this.tableHeight = window.innerWidth >= 1600 ? 400 : 100;
      };
    },
  };
</script>
css

  css部分可参考第3点的例子,但这个在一些组件上会有比较难把握的问题,如table,或者树形数据这些,使用calc的方法来定高的话会造成数据过少时,下方出现空白(不够撑开),像这些的话推荐还是用js来控制好一些。
  如果是采用calc来设置的话,最好是采用vw,vh单位来计算,%可能不起作用。


  • alipay
  • wechat