山东大学软件学院创新实训——项目记录（五）

零、前言

本周主要是解决div的对齐问题，对element-ui提供的el-upload组件的拓展，以及对vue页面的调试的一些方法记录。

一、div的对齐问题

问题关键：margin-right属性的失效
我们都知道盒子模型的组成，外边距，内边距，内容区，和边框，在css样式中一般通过margin-left和margin-top控制盒子的向右和向下移动，可是每当在css样式中添加margin-right样式往往不会生效。

问题原因：浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下 如果子容器的宽度能够被容纳 设置margin-right是没有用的。

解决办法:必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果

.my_chat {
  float:right;/*关键：浮动（float）：将元素浮动到页面上的左侧或右侧，这样它就会脱离文档流，margin-right 就会生效。*/
  width: fit-content;
  height: fit-content;
  /* display: flex; */
  /* position: absolute; */
  
  margin-right: 280px;

  max-width: 300px; /* 最大宽度 */
  min-height: 40px; /* 最大高度 */
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #7ae1b6;
  opacity: 0.8;
}

消除浮动后的生效结果：

二、获取页面vue组件的属性

在浏览器的控制台测试时，项目里面的文件都是一个个的组件，想在控制台中修改，查看组件data里的值无法直接通过this指针来实现。
要达到目的，我们就必须有一个新的指针来在控制台辅助测试。

方法是在created钩子函数里定义一个全局变量，就可以在浏览器控制台中使用了。

created () {
    // 这行代码的意思是定义一个全局变量，等于该组件的实例
   window.myData = this
}

结果展示：

三、对el-upload的拓展

原本的el-upload不能自定义上传函数，必须在组件里写上传的后端url，并且对多文件上传的支持有不足，因此要对其进行修改。

思路：要在方法中能够访问el-upload组件的属性
方案：可以通过在模板中使用 ref 属性为 el-upload 组件设置一个引用，然后在方法中通过 this.$refs 访问该引用。

<el-upload
        ref="upload"
        action="#"
        list-type="picture-card"
        :auto-upload="false"
      >
      </el-upload>

在上面例子中给el-upload添加了 ref=“upload” 属性，这样你可以在 Vue 组件的 methods 中通过 this.$refs.upload 访问 el-upload 组件的实例。

实现对上传文件列表中文件的删除

handleRemove(uid) {
      let index = this.$refs.upload.uploadFiles.findIndex(
        (file) => file.uid === uid
      );
      if (index !== -1) {
        this.$refs.upload.uploadFiles.splice(index, 1);
      }
    },

之后就可以在控制台用全局变量来访问el-upload的属性了