做demo遇到的问题

阿飞学不会吖

已于 2023-11-08 11:31:54 修改

阅读量595

点赞数

文章标签： css 前端 css3

于 2022-08-18 14:46:04 首次发布

本文链接：https://blog.csdn.net/qq_48943782/article/details/126405646

版权

前言

有一段时间没有更新了，今天就来总结一下最近做的demo中前端部分遇到的问题。

1. Element-ui中的自定义样式的问题

这是一个老生常谈的问题，由于我的Element-ui使用的不熟练，在开发过程中处理Element-ui的样式还是挺费劲的。

这里我用到了 el-card组件，类似于下面的结构：

<el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>新增专家</span>
        <el-button  type="text" icon="el-icon-close"></el-button>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="55px" class="demo-ruleForm">
       ······
    </el-form>
</el-card>

经过学习，我总结了下面几点Element-ui中自定义样式的解决方法。

1.1 自定义class

我们可以给组件加class，在style里面直接修改

注意：style一定不要加scoped，否则样式会不起作用

1.2 使用/deep/ (推荐)

如果我们需要在style上加scoped，并且我们需要使用到less预处理器，那我们就可以用到 /deep/

类似于下面的写法：

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
    width: 130px;
    height: 130px;
    border: 1px dashed #b6bbc0;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #fafbfc;
}
</style>

使用 /deep/ 的好处是可以使用scoped，使得组件间的样式不会相互影响

1.3 使用 >>>

我们不使用css预处理器，就单纯的使用css，这时我们可以使用 >>>作为深度选择器

<style scoped>
.box >>> .el-input {
  width: 60px;
}
</style>

2. 使用flex布局，多列布局，最后一行只有两列向左对齐问题

这里我们以三列布局为例
结构

    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

样式

        .wrapper {
            width: 600px;
            height: 600px;
            margin: 50px auto;
            border: 2px solid skyblue;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .wrapper div{
            width: 150px;
            height: 150px;
            border: 1px solid red;
            text-align: center;
            line-height: 150px;
            font-size: 24px;
        }

当最后一行不足时就会出现下面的情况：

在这里插入图片描述

但是我们需要实现的效果是，最后一行居左显示

我们可以给父元素添加伪元素来实现

        .wrapper:after{
            content: "";
            display: block;
            width: 150px;    // 值得注意的是这里的width要和子元素宽度一致
            height: 0;
        }

在这里插入图片描述

这种方式我测试只有三、四列布局的时候有效果，列数很多的时候，最后一列只有一两个元素那么最后一列的对齐方式还是有问题

我暂时还没遇到列数很多的布局，这个问题先放到这里吧，等遇到再去探究哈哈哈

3. vue中删除数据,总是删除最后一个

我的数据是动态渲染的，当我测试的时候发现删除数据总是删除最后一个

原因：使用了 :key=index
解决：不要使用:key=index,如果在不破坏数据结构的情况下可以使用，但是如果对数据进行删除等操作时就会出现问题
建议：使用可以唯一标识数据的变量，例如 :key=id 这样问题就可以解决

4. 关于router-link激活时的样式问题

router-link有个exact-active-class属性，可以设置当前标签被激活的样式

<router-link to="/experts/全部" exact-active-class="active">全部</router-link>

css 直接写 .active{} 直接在里面写样式即可

      .active{
        color: #dd9f9f;
        border-bottom: 1px solid #f6f6f6;
        padding-bottom: 10px;
      }

5. Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？

点我跳转破！

6. 深浅拷贝的问题

JSON.parse() 方法将数据转换为 JavaScript 对象
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串

在这次前端开发过程中遇到了深浅拷贝的问题
具体是这样的：
为了方便重置form表单中的内容，我就将data中form表单的初始化数据复制了一份

但是在重置数据的时候进行直接赋值的操作

this.ruleForm = this.newruleForm

由于是浅拷贝，这样就导致了两个变量的地址是相同的了，form表单数据绑定的是ruleForm ，但是经过观察vue工具，
ruleForm 和newruleForm会同时改变，这是就需要用到深拷贝。经过查询，我也了解到我认为深拷贝较为简单的实现方法。

this.ruleForm = JSON.parse(JSON.stringify(this.newruleForm));

这样就可以实现深拷贝，具体深浅拷贝后面单独再写篇文章做总结，这里不做深究了

7. 子组件接受的props直接修改的问题

关于单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
在这次demo的开发中，需要用到父子之间数据的传递，父组件使用自定义属性向子组件传递数据，
子组件使用props接收。
父组件
子组件
在上面html结构中，进行数据的渲染的时候直接使用父组件传递过来的myExport
导致后面出现了错误。
诸如此类情况，我们接收父组件传递过来的数据不要进行直接修改，要在子组件中设置一个变量进行接收，渲染数据的时候
使用子组件新设置的变量进行渲染。

props的几种写法

这里用到了props，所以就总结一下props的几种书写方式

1. 写成数组形式

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

2. 写成对象形式

参考官网
通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

3. prop 验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

 props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }