vue开发中遇到的注意点

纪风
417 阅读3分钟

vue开发中常见的容易忽视的点

1.使用element的el-table实现鼠标hover上去，获取该行数据最大值，并根据其中，

背景：在开发中有些小的注意点，因为处理方法不对可能会导致时间的浪费，特此提醒自己多注意

1.使用element-ui中的el-popover弹出框在全屏时不显示的问题：

做大屏的时候经常需要使用到全屏功能，在全屏时el-popover会出现不显示，通过元素检查是可以看到弹窗元素是存在页面中，但是却失效了，原因该元素内容追至body了。

解决办法:append-to-body="false"//禁止内容追加至body

image.png

2.el-popover弹出框样式修改：

el-popover弹出框在开发经常需要按页面修改样式，按照文档我们使用他给的class名称popper-class对元素进行类名命名，注意：style标签不需要添加scoped（message等也同理）

<style lang="less">
.类名{
  修改的样式
}
</style>

例如：element中el-pagination、el-select组件下拉框样式修改： 在组件中添加自定义样式的属性popper-class

<el-pagination popper-class='select_bottom'/>

<style lang="less">
.select_bottom {
  .el-select-dropdown__list {
    background: #043476;
    border-radius: 0.04rem;
  }
  ...
}
</style>

image.png

3.canvas的使用

canvas是一款非常好用的标签，在项目中使用时有些点需要特别注意： 1.canvas默认宽高为300px、150px；想要修改它的宽高，直接修改它的css相当于等比例的伸缩，会导致在canvas区域的图形按给的css高度/150px、css宽度/300px的比例进行放大、缩小；如果想修改canvas的长宽，但不想影响其比例应该使用如下方式：（注意点：不要带单位，canvas默认单位为px）

let canvas = document.getElementById('id名称');
canvas.width = 400 // 注意：没有单位
canvas.height = 400; // 注意：没有单位

2.对图形进行颜色的填充，使用ctx.fillStyle = "颜色"时发现可能会出现无效的情况，颜色并没有填充进去，这时需要使用ctx.fill();示例：

let canvas = document.getElementById('id名称');
canvas.width = 400 // 注意：没有单位
canvas.height = 400; // 注意：没有单位
let ctx = canvas.getContext("2d");
ctx.fillStyle = "填充颜色";
ctx.strokeStyle = "边框颜色";
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.closePath();
ctx.fill(); // 填充颜色
ctx.stroke(); // 描边。stroke不会自动closePath()
4. element-ui——el-table表格组件出现选择某几行但全选框显示选中（√）的情况

解决方案：给row-key值绑定一个唯一值

行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

J6AYshRtR7.jpg

5. 解决element中el-dialog弹框组件没有垂直居中问题：

解决代码如下：

/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
6.element-ui的select无法回显的问题：

问题描述：使用el-select 组件出现一个小问题，选中选项后选框数据没有更新（1.保持空白，2.数据不变），但是检查实际数据是更新的。可能是视图层没有更新，组件化框架类似问题。

修改方法：@change="$forceUpdate()"强制更新视图

<el-select v-model="value" placeholder="请选择" @change="$forceUpdate()> 
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">   </el-option>
</el-select>
7.页面全屏后，el-dialog弹框、下拉框或者其他组件出现全屏不显示的问题：

原因：网页全屏后，某些弹窗元素并不是挂载在全屏body中，需要手动添加进去。

解决方法：在需要触发组件的地方调用append添加元素。 例如：1.首先我们判定大屏是否全屏，如果处于全屏中我们通过document.getElementById或者其他方式。

this.$nextTick(() => {
  setTimeout(() => {
    this.$refs.homeworkScreen.appendChild(
      document.getElementById("dayInspectionDialog")
    );
  }, 100);
});
avatar
文章
阅读
粉丝