前端开发一些小坑

Vamp_Piece

已于 2024-04-03 17:30:01 修改

阅读量150

点赞数

分类专栏：前端开发踩坑记录前端文章标签： css 前端 sass

于 2023-05-23 17:32:35 首次发布

本文链接：https://blog.csdn.net/m0_50298323/article/details/130521410

版权

本文总结了前端开发中的十个常见问题，包括Vue3中scoped样式失效、元素居中、element-plus按钮颜色定制、滚动时背景固定、element-UI MessageBox样式修改、dialog无法弹出、i18n翻译一致性、前后端交互注意事项、element-UI变量样式及vue3中el-table数据长度获取等，并提供了详细的解决方案。

摘要由CSDN通过智能技术生成

前端开发一些小坑1

一、vue3中设置css样式+scoped属性后css失效

具体问题：style标签中添加scoped属性css样式失效

<style lang="scss" scoped>
// 添加::v-deep即可解决
::v-deep.el-card {
   
}
</style>

二、设置样式居中

设置版心：占屏幕多少（根据屏幕自适应）
设置布局：具体的需根据计算（有UI图是最好的，若没有则自己根据屏幕去计算）

三、element-plus自定义按钮颜色

<template>
  <el-button type="primary" size="large" @click="priceQuery">查询</el-button>
</template>

<script lang="ts">
  import {
   
    computed,
    defineComponent,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
    onUpdated,
  } from "vue";


  export default defineComponent({
   
    name: "",
    setup() {
   
      return {
   };
    },
  });
</script>

<style lang="scss" scoped>
  /* 自定义按钮默认颜色：通过type="primary" 进行颜色的改变 */
  .el-button--primary {
   
    background-color: #ff6501;
    border-color: #ff6501;
    /* 自定义鼠标悬浮时的颜色 */
    &:hover,
    &:focus {
   
      background-color: #ff8434;
      border-color: #ff8434;
    }
  }
</style>

效果图如下：

四、使用鼠标滚动时，css背景不固定且跟随内容进行滚动

css中浮动高度塌陷问题：

.all {
   
  width: 100%;
  height: 100%;
  background-image: red;
  overflow: auto;
 }

overflow共有5个属性：

overflow: auto; 内容会被修剪，超出设置的宽高后会出现滚动条

overflow: scroll; 内容会被修剪，无论内容是否超出都会出现滚动条

overflow: visible; 默认属性，内容不会被修剪，内容会出现在元素框外面

overflow: hidden; 内容会被修剪，多余的内容会被隐藏

overflow: inherit; 会继承父元素的overflow值

总结：或者可以使用监听滚动高度，当超过一定高度时添加背景颜色

五、修改element-UI框架中Message Box消息弹出框中按钮的样式

<template>

</template>

<script lang="ts">
import {
   
  onMounted,
  defineComponent,
} from 'vue';
import {
    ElMessageBox } from 'element-plus';

export default defineComponent({
   
  name: '',
  setup() {
   
  

    onMounted(() => {
   
      ElMessageBox.alert(
        'text内容',
        {
   
          type: 'warning', // 这个是icon图标的类型
          
        }
      );
    })