前端问题补充

2022年2月14日添加两个浮动(float)的div下换行问题
2022年2月14日添加前端多页面时来回调用时，总是会出现属性不存在的问题问题

两个浮动(float)的div下添加div，div实际位置在浮动(float)的div之下；两个浮动(float)的div下换行

• 问题现象如下
  左右两个浮动div的高度是50px，而新添加的div高度是60px，可以看到两个float的div将新添加的div给覆盖了，这是调整新添的div的样式是困难的
• 代码如下

<div style="float: left; width: 50%; height: 50px; background: red;">这是左浮动</div>
<div style="float: right; width: 50%; height: 50px; background: blue;">这是右浮动</div>
<div style="margin: 3px 5px; padding: 3px 5px; width: 500px; height: 60px; background: yellow">这是新添加的div，设置长度和高度，设置内外边距</div>

• 解决方案
  清除浮动div的影响，添加<div style=“clear:both”></div>即可
• 解决后的效果* 解决后的代码

<div style="float: left; width: 50%; height: 50px; background: red;">这是左浮动</div>
<div style="float: right; width: 50%; height: 50px; background: blue;">这是右浮动</div>
<div style="clear:both"></div>
<div style="margin: 3px 5px; padding: 3px 5px; width: 500px; height: 60px; background: yellow">这是新添加的div，设置长度和高度，设置内外边距</div>

前端多页面时来回调用时，总是会出现属性不存在的问题

• 问题现象（F12页面）
• 解决方案
  在使用call和apply方法时，将对象传进去
• 解决后的代码

// athis代表a页面的this对象，bthis代表b页面的this对象
var athis = athis;
var bthis = bthis;
// 调用a页面的add方法
athis .add.call(athis); 或 athis .add.apply(athis);
// 调用b页面的add方法
bthis .add.call(bthis ); 或 bthis .add.apply(bthis );

vue-form表单里的输入框在ie下点击回车出现错误页面

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

vue-table表格在多次路由或跳转之后，出现表格缩小，表格没有占满页面

是因为表格中使用了width参数造成的，将width参数改为min-width即可。vue在渲染时会将剩余的长度渲染给width属性的字段。

ie无法使用new File()方法

ie中没有File方法，可以使用new Blob方法进行创建文件对象，但需要向后端传文件名称。File是继承Blob的。
前端代码如下：

var blobObject = new Blob(['ab','cde','fg'], {type: 'text/xml'});
var fileName = "aaa.text";

后端代码：

import org.springframework.mock.web.MockMultipartFile;
import org.springframework.web.multipart.MultipartFile;

public void getFile(MultipartFile file, String fileName) {
	// 此时的file是Blob类型，是不全的，需要进行转换
	// 前端使用new Blob()创建文件,后端file.getOriginalFilename()获取到的值为blob
	if (file != null && "blob".equals(file.getOriginalFilename())) {
		file = new MockMultipartFile(file.getName(), fileName, file.getContentType(), file.getInputStream());
		// 之后就可以正常使用file了
	}
}

vue-input的字数显示出来

修改后代码如下：

<el-input
  type="text"
  placeholder="请输入内容"
  v-model="text"
  maxlength="10"
  show-word-limit
  style="padding-bottom: 25px; padding-right: 12px;"
>

在vue的mounted()方法中如何获取dom元素，如何将iframe的get请求改为post请求

<form id="form-test" target="iframe-test" method="post" action="/api/test">
	<!-- 如果有参数的话 -->
	<input type="text" name="param" style="display: none" :value="value" />
</form>
<!-- iframe的name要与form的target一致 -->
<iframe name="iframe-test" src="#" frameborder="0"></iframe>

mounted() {
	// this.$nextTick会等页面渲染和数据更新好之后运行
	this.$nextTick(() => {
		var form = document.querySelector("#form-test")
		form.submit();
	});
}