vue项目问题总结

设置默认滚动条样式

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

样式一

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

样式二

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
    transition: 0.3s ease-in-out;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

参考文章：blog.csdn.net/weixin_5803…

JavaScript给元素添加class属性

注意：element.classList.remove()、element.classList.add() — ie9及以下不兼容

// 移除div的class属性
obj.classList.remove('active');
      
// 添加class属性值
// 方式一
obj.className += 'new active';

// 方式二
obj.className = 'new active';

// 方式三：属性值不能有空格，例如'new active'
obj.classList.add('newActive');

elemnetUI中的嵌套el-dialog弹框中，解决使用custom-class修改样式不生效的问题

dialog也相当于一个组件，而我们的样式scoped是局部样式，所以我们写在它的里面，它是找不到的，所以要把dialog样式加到外面，这样就可以啦。

<template>
<div class="main">
  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
    <el-dialog
      custom-class="cloudBody">
    </el-dialog>
  </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false
      };
    }
  }
</script>
<style lang="scss" scoped>
 .main{
    /deep/ .el-dialog.cloudBody{
      width: 500px!important;
      margin-top: 20vh!important;
    }
  }
</style>

flex布局，项目的高度问题

如果项目没有设置高度，align-items的高度会默认占满整个容器的高度。所以，再有一个项目的时候，我们会看到他的高度铺满整个父容器。所以，我们要给项目的align-items设置一个其他的选项值就可以解决这个问题了。

flex布局，项目居中显示，溢出时，无法滚动到顶部的问题

当我们在一个容器中，水平垂直居中一个项目时，当这个项目超出容器高度时，我们要让它可以滚动。这时候，会出现无法滚动到顶部的问题。

      <div class="content">
          <transition name="slide-fade">
            <div class="word-info" :style="wordInfoStyle">
              <div class="word-info-top" :style="topWordInfoStyle(currentWord.read_image)">

                <div class="word-header">
                  <div class="word-info_text" >
                    {{currentWord.word}}
                  </div>
                </div>
                <div class="word-info_speech">
                    <span class="word-info_text_speech">{{localPhonetic}}</span>
                </div>

                <div class="word-info_chinese">
                  <div class="word-info_chinese_text">
                    <span
                      style="margin-right: 1rem"
                      v-if="currentWord.part_of_speech"
                    >{{currentWord.part_of_speech}}.</span>
                    <span>{{unique(currentWord.chinese)}}</span>
                  </div>
                </div>
              </div>
              <div class="word-info-bottom" v-if="currentWord.read_image">
                <img :src="currentWord.read_image" alt="">
              </div>
            </div>
          </transition>


          <audio ref="localAudio">
            <source
              :src="audioUrl"
              type="audio/mpeg"
              @error="playError"
            >
            Your browser does not support the audio tag.
          </audio>
      </div>

这时，我们可以给项目设置一个最大高度，并且给项目中的内容设置一个margin:auto

.word-info {
  max-height: 100%;
  text-align: center;
  /*font-size: 4em;*/
  display:inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  overflow: auto;
}

.word-info-top {
  width: 100%;
  margin:auto;
  margin-bottom: 43px;
}
.word-info .word-header {
  text-align: center;
  /* display: flex;
  justify-content: flex-start;
  align-items: center; */
}

.word-info .word-info_text {
  font-size: 100px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #4DC34D;
  line-height: 140px;
  display: inline-block;
  text-align: left;
}

.word-info .word-info_chinese {
  font-size: 50px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 70px;
  text-align: center;
}

.word-info_chinese_text {
  display: inline-block;
  text-align: left;
} 

.word-info .word-info_speech {
  font-size: 60px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 84px;
}

.word-info-bottom {
  margin: auto;
}

.word-info-bottom img{
  width: 485px;
}

flex-end为什么overflow无法滚动及解决方法

张鑫旭：www.zhangxinxu.com/wordpress/2…