前端日记，持续更新中。。。

1.element-ui el-input输入框加单位

el-input 如果需要添加单位显示，可以在el-input中插入一个插槽即可实现

代码：

<el-form-item label="销售额：" prop="orderAmount" label-width="120px">
   <el-input v-model="form.orderAmount" style="width: 300px;">
    	<template slot="append">元</template>
   </el-input>
</el-form-item>

效果如图：

2.表格搜索结果为空时显示图片

使用element-ui做表格搜索或分类查询的时候，当结果为空，可以放一张图片，如下图：

实现代码：

<el-table :data="userList" border style="width: 100%" :row-class-name="setClass">
	<el-table-column prop="headimgurl" label="头像" width="180" align="center">
		<template scope="scope">
			<el-avatar shape="square" :size="50" fit="fill" :src="scope.row.headimgurl"></el-avatar>
		</template>
	</el-table-column>
	<el-table-column prop="name" label="姓名" width="180" align="center">
	</el-table-column>
	<el-table-column prop="class" label="班级" align="center">
	</el-table-column>
	<el-table-column prop="age" label="年龄" align="center">
	</el-table-column>
	<el-table-column prop="cTime" label="创建时间" align="center">
	</el-table-column>
	<el-table-column prop="productUrl" label="项目" align="center">
	</el-table-column>
	<el-table-column label="操作" align="center" fixed="right" width="240px">
		<template scope={row}>
			<el-button type="info" v-if="buttons.indexOf('read') !== -1" plain size="mini" @click="$router.push({path:'/StudentManager/studentProfile'})"><i
				 class="el-icon-view"></i>查看</el-button>
			<el-button type="info" v-if="buttons.indexOf('edit') !== -1" plain size="mini" @click="editUserInfo(row)"><i
				 class="el-icon-edit"></i>编辑</el-button>
			<el-button type="danger" v-if="buttons.indexOf('delete') !== -1" plain size="mini" @click="delUserInfo(row)"><i
				 class="el-icon-delete"></i>删除</el-button>
		</template>
	</el-table-column>
	// 在此处可以使用slot="empty"的方式插入为空时显示的图片
	<div slot="empty">
		<img src="../../../assets/blank/blank.png" alt />
	</div>
</el-table>

3.require.context的简单使用

require.context(directory, useSubdirectories, regExp)

directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则

const storeModules = require.context('./modules', false, /\.js/)
const langs = require('./modules/langs.js')
console.log(storeModules)
console.dir(storeModules)
console.log(storeModules.keys())
console.log(langs)

调用keys方法可以获取到目录的字符

使用keys返回目录的数组，并调用forEach方法遍历目录，将每个路径传入storeModules中，结果如下

storeModules.keys().forEach(filename => {
  console.log(storeModules(filename))
})

最终结果与 const xxx = require(‘./xxx/xxx.js’) 返回结果一致

4.Number对象转换数字精度丢失问题

在项目中和后台对接时候，关于会员的接口中都需要向后台传一个vipId的字段，去查会员的一些基本信息，这个vipId是一个自增id，当时应后台要求传入数字类型而使用Number转换了一下。但是后期快上线的时候由于导入客户提供会员数据及某些原因，使vipId达到了惊人的1612179754378615606，请求到的数据也不正确，后面排查发现vipId已经超过Number对象转换的最大整数：Math.pow(2,53)。导致传给后台的vipId一直都是有误的，最终还是将其全部替换成字符类型，问题才得以解决。

5、简单版查找数组最大最小值

const array  = [2,1,54,32,21,34,67,3,53,12,87];
// 最大值
array.reduce((a,b) => a > b ? a : b);	// 87
// 最小值
array.reduce((a,b) => a < b ? a : b);	// 1

6、数组去重

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// 输出: [5, 4, 7, 8, 9, 2]

7、小程序scroll-view无法下拉

在使用uniapp开发微信小程序，使用 scroll-view 组件做分页查询时遇到一个问题，明明已经开启了下拉刷新属性，并且配置好各个方法，但是使用时却无法下滑

由于页面使用了自定义头部，所以 scroll-view 组件高度只能动态获取，尝试将height属性写死，发现组件可以正常下拉操作了

但是height属性肯定不能去写死，所以最后想到一个简单的办法，就是在data里面给height初始化一个比较大的值，后面再去更新这个值，问题解决。。。

8、小程序文本两端对齐

text-align: justify;
text-align-last: justify;
text-justify: inter-ideograph;

9、小程序input框滑动后聚焦打开键盘，placeholder及输入文本位置被顶上去

可能是最外层的父组件高度设置了100vh导致，去掉即可

10、文本可以换行但是数字没有换行

增加 css word-break: break-all;

11、el-table使用fixed="right"时固定列，左边边框被遮挡

增加以下样式

.el-table__row td:not(.is-hidden):last-child {
    border-left: var(--el-table-border);;
  }
   
 .el-table__header th:not(.is-hidden):last-child{
   border-left: var(--el-table-border);;
 }
  
 .el-table__header-wrapper tr th:nth-last-child(1){
   border-right:none;
 }
  
 .el-table__body-wrapper tr td:nth-last-child(1){
   border-right:none;
 }

持续更新中。。。