持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
年轻人总得给一个犒劳自己的理由吧 就像今天的儿童节。 希望小朋友开心 希望打工的大朋友也开心吧
part1 算法题
【58】 反转字符串力扣链接
let newArr = s.split('')
for(let i = 0;i < n;i++){
newArr.push(newArr.shift())
}
return newArr.join('')
};
var reverseLeftWords1 = function (s, n) {
// 1，先将整个数组反转过来
let strArr = Array.from(s)
reverse(strArr,0,strArr.length-1)
// 2，从后面数第n位为中间点，前面进行一次反转，后面的也进行一次反转
reverse(strArr,0,strArr.length - n - 1)
reverse(strArr,strArr.length - n,strArr.length-1)
function reverse(s,l,r){
for(let i = l,j = r; i < j ;i++,j--){
[s[i],s[j]] = [s[j],s[i]]
}
}
console.log(strArr.join(''))
return strArr.join('')
};
part2 项目总结点
1， 实现效果，当将鼠标放在某一个标签上的时候，鼠标变成小手的样式。 直接在该元素的样式上面加上cursor:pointer; 拓展其他样式：
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto</span> <!--默认，浏览器设置的光标-->
<br/>
<span style="cursor:crosshair">Crosshair</span> <!--光标呈现为十字线-->
<br/>
<span style="cursor:default">Default</span> <!--默认光标（通常是一个箭头）-->
<br/>
<span style="cursor:pointer">Pointer</span> <!--光标呈现为手形-->
<br />
<span style="cursor:move">Move</span>
<br/>
<span style="cursor:e-resize">e-resize</span>
<br />
<span style="cursor:ne-resize">ne-resize</span>
<br/>
<span style="cursor:nw-resize">nw-resize</span>
<br/>
<span style="cursor:n-resize">n-resize</span>
<br/>
<span style="cursor:se-resize">se-resize</span>
<br/>
<span style="cursor:sw-resize">sw-resize</span>
<br/>
<span style="cursor:s-resize">s-resize</span>
<br/>
<span style="cursor:w-resize">w-resize</span>
<br/>
<span style="cursor:text">text</span>
<br/>
<span style="cursor:wait">wait</span> <!--此光标指示程序正忙（通常是一只表或沙漏）-->
<br/>
<span style="cursor:help">help</span> <!--此光标指示可用的帮助（通常是一个问号或一个气球）-->
2， 当鼠标移动到table中某一个单元格的时候，出现弹窗 第一步 为每一个表格，设置一个弹窗div，一开始是隐藏的。 第二步 设置表格，鼠标进入与鼠标离开的函数，用来控制弹窗div的显隐。
<template>
<div>
<table>
<tr v-for="item in tableData" :value="item.value" :key="item">
<td>
<div>
<template>
{{item.id}}
</template>
</div>
</td>
<td>
<div @mouseover="mouseenterHander(item.id)" @mouseout="mouseoutHander(item.id)">
<template>
<template>
{{item.name.substr(0, 8)}}
</template>
<template v-if="item.name.length > 8">
...
</template>
</template>
</div>
<!-- 这个是弹窗，先设置在这儿 -->
<div class="dpop" title="弹框" v-if="item.showFullName">
<template>
{{item.name}}
</template>
</div>
</td>
</tr>
</table>
</div>
</template>
<script>
const tableData= [
{
id: 10,
name: '欧美当地时间9月5日一早，大量网友纷纷反馈雅虎网站宕机，连带雅虎的邮件、搜索等服务也不可用。',
showFullName: false,
},
{
id: 20,
name: '从地域分布看，欧洲是雅虎本次宕机故障的重灾区，尤其是法国、西班牙、英国、意大利等，还有美国东西部、新加坡、印度、菲律宾等地，我国主要集中在广州、台北及附近地区。 目前，雅虎尚未发表任何公开声明。',
showFullName: false,
}
] ;
export default {
data() {
return {
tableData
}
},
methods: {
say: function (message) {
alert(message)
},
// 鼠标进来触发函数，就是控制div显示的变量showFullName
mouseenterHander(id) {
tableData.forEach(ele => {
if(ele.id == id) {
ele.showFullName = true
}
});
},
// 鼠标离开出发函数
mouseoutHander(id) {
tableData.forEach(ele => {
if(ele.id == id) {
ele.showFullName = false
}
});
}
}
}
</script>
<style scoped>
.dpop{
position:absolute;
z-index:3;
border:1px dashed #EEF;
background:#EEE;
}
</style>
3，把message的警告弹窗放在最上层
情况：当页面上有弹窗的时候，message弹窗就会被其他弹窗所掩盖，因此就必须得提高message的样式层级
我们常用的$message,其实就是element-ui中的Message组件。
在文档说明的地方，可以看见Message组件有一个自定义的类 customClass，就可以通过这个来进行设置。
样例：
this.$message({
type: 'warning',
message: '请先创建枚举值再进行编辑！',
customClass: 'messageIndex'
});
//！！！！ 一定是没有scoped的style标签里面
<style>
.messageIndex {
z-index: 9999 !important; // 设置的值一定要比2007大，因为dialog的层级是2007
}
</style>
4，将el-input和el-select的框的宽度设置成一致的。 其实在el-select的底层其实就是el-input， 只要将el-select加一个属性，就是将其width设置为100%。 原因是什么呢，有待研究。
5，isNaN的原理 isNaN(n):（是不是一个非Number类型的数据）
首先这个方法会先将n尝试转换成Number类型，
转换之后，如果是'2' 就转换成 2
如果是'abc' 就转换成 NaN
接下来再进行判断，如果是数字，就return false，否则 return true
注意这个方法的含义哦
