前端项目中用到的css整理

垂直水平居中

position: absolute;
top: 50%;
left: 50%;
margin: 0 !important;
transform: translate(-50%, -50%);

自定义按钮

// 自定义图标交互效果
.iconBox {
  cursor: pointer;
  opacity: 1;

  &:hover {
    opacity: 0.8;
  }

  &:active {
    opacity: 1;
  }

  &:focus {
    opacity: 0.8;
  }
}

禁止选中文字

[dissel]{
  -moz-user-select: none;
  -o-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<p dissel>123</p>

禁用

[disabled] {
  &.el-button {
    background-color: #6e6b6b !important;
    border-color: #6e6b6b !important;
  }

  cursor: not-allowed!important;
}

配合@click="boo&&clickhander()"

溢出隐藏

.txt{
	white-space: nowrap;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

使用

<el-table-column prop="workdays" :label="'表格列标题'" min-width="200px" >
            <template slot-scope="{ row }">
              <el-tooltip v-for="(item) in parseWorkdays(row)" :key="item.key" effect="dark" :content="item.content" placement="top" :open-delay="500">
                <p style="white-space: nowrap;cursor: text;overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{item.content}}</p>
              </el-tooltip>
            </template>
          </el-table-column>

<el-table-column prop="timerange" :label="'表格列标题'" min-width="160px" :show-overflow-tooltip="true">
                </el-table-column>

[textEps2]{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

使用

<el-table-column
  prop="name"
  :label="$t('user.tableCols.name')"
  min-width="160"
>
  <template slot-scope="{ row }">
    <el-tooltip
      class="item"
      effect="dark"
      :content="row.name"
      placement="top"
      :open-delay="500"
    >
      <span textEps2>{{row.name}}</span>
    </el-tooltip>
  </template>
</el-table-column>

css样式与蓝湖区别

1. 盒子阴影

   h5css默认是外阴影，蓝湖是默认内阴影

   加个inset 就行了

base64使用注意

• 直接将base64数据给图片的src,该图片style中的object-fit不生效
• 有时候不传头，自己拼 data:image/jpeg;base64,

全屏元素不阻挡点击事件

pointer-events: none;