WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

获取a数组中的最大值和最小值

Math.max.apply(null, a)
Math.min.apply(null, a)
ES6:
Math.max(...arr);Math.min(..arr)
交换两个变量的值:
let a = 'world', b = 'hello'
[a, b] = [b, a]
将类数组(nodelist,arguments,HTMLCollection等)转化为数组的方法:
let arr = Array.from(likeArray);
let arr = Array.prototype.slice.call(likeArray);
let arr = [].slice.call(likeArray);
数组拼接:const result = [...one, ...two, ...three],
拷贝:const obj = { ...oldObj } //数组和对象的元素为简单数据类型
const arr = [ ...oldArr ]
双重非位运算:Math.floor(5.5)===5 //true,
~~5.5===5 //true 速度更快

elementUi的表格边框问题

使用了淘宝初始化css添加的一句 border-collapse:collapse;(合并边框)导致elementui添加边框时
表格出现了横向滚动条 取消这一句出现表头缺少一些竖向边框(加上border-right解决)

vue生命周期

在mounted之前或者是beforeRouteEnter中向文档中注入了一段html代码,想要使用dom获
取注入diamagnetic的节点,需要在updated中去获取
复用组件的重载:当父组件中数据发生改变然后动态绘制了dom改变时,如果dom中使用了子组件
则在子组件的mounted中无法获取触发,需要在updated中去获取触发。

webpack的问题

1:使用npm run build 时报错
//ERROR in static/js/6.1ae008b1e3494673983b.js from UglifyJs
//Invalid assignment [./static/js/unifiedVerificationRule.js:6,0]
定位问题:我将unifiedVerificationRule.js(一个用于公共验证的js)放到了static下的
js文件夹中。
解决:将这个外部公用的js文件放入到项目文件的assets中的js文件夹中,解决

IE报错 严格模式下不允许一个属性有多个定义

在元素上定义了多个属性且重复定义了<el-dialog
attr1='false'
attr1='true' //这就会在IE中报错,谷歌,火狐不会报错
>
</el-dialog>
IE10的问题,行内css某些不能生效,比如,flex-wrap,justify-content:center等这种短横线
类型的,但是某些短横线类型的也能生效比如:background-color:red;

elementUi tree形控件

1: 自定义节点内容->在vue+webpack中使用jsx语法,为元素绑定onContextMenu事件不生效,其他事件没问题
解决方案:不为元素绑定事件,而是绑定获取到的数据
<span class="contextMenu" data-id={data.id} data-type={data.type}
data-unique={data.unique}>{node.label}</span>
然后在其父级元素上绑定事件 并且获取这些绑定好的数据。
2:树节点上的事件 node-click node-expand node-collapse node-click不能由点击tree中自带的展开
关闭按钮的点击事件触发 只能由node-expand node-collapse触发,如果想给节点添加点击事件并且点击展开暂时没有hao
3:setCurrentKey-> this.$refs.tree2.setCurrentKey(key) 来动态设置某个节点是否被选择 ps:如果想看到效果
需要设置 highlight-current(高亮当前选中节点),将key保存在vuex或者是本地中可以让tree保持状态
4:tree的顶部有一个搜索框专门搜索tree的节点,如果要做状态管理就必须为这个搜索框也做,当用户输入时,
记录这个输入保存在状态中,当用户切换回来时,将这个值放入搜索框中。
ps:用户输入时会直接改变这个值,而这是一个mapGetters计算属性,不能外部设置值,只能在mutations中设置,强行设置 会抛出错误Computed property "filterText" was assigned to but it has no setter. (NO setter)

Element初始化设置

ElementUI.Message.success = (options)=>{
if (typeof options === 'string') {
options = {
showClose: true, //相当于全局配置,一般不用
message: options
};
}
options.type = 'success';
return ElementUI.Message(options); //promise??
};
ElementUI.Message.error = (options)=>{
if (typeof options === 'string') {
options = {
showClose: true,
message: options
};
}
options.type = 'error';
return ElementUI.Message(options);
};

ElementUi

element input 自动获得焦点 autofocus属性
不支持自定义指令 v-focus="focusStatus"
directives: {
focus: {
inserted(el, {value}) {
if (value) {
el.focus();
}
}
}
}
原生input框支持自定义指令获得焦点
项目打包后App.vue中的全局样式后Element的样式有冲突(没有打包时样式为App中的样式,打包后
变成了Element的样式)
解决1:将APP和Element交换
解决2:将样式修改位
table tr th {
text-align:center
}

js数组属于引用类型

console.log([1,2,3]==[1,2,3])//false
var arr1=[1,2,3],arr2=[1,2,3];
console.log(arr1==arr2)//false
console.log([]==[])//false
字符串替换
function replaceSpace(str){
return str.split(" ").join("%20")
}

js数组去重

[1,2,3,1,'a',1,'a'].filter((ele,index,array)=>{ //filter返回 返回项为true的所有集合的新数组
return index===array.indexOf(ele)
})
[...new Set([1,2,3,1,'a',1,'a'])]

ECharts的一些问题 补充

setOption(option,true)//true 代表每次重新读取数据划线,相当于清屏不保留上次的曲线
x轴的type设置位value时接受的数据格式为[[x,y],[x,y],[x,y],[x,y],[x,y],[x,y],[x,y],[x,y],[x,y]] //这种格式
x轴的type设置为time时接受的数据格式为 [['2017/08/20 12:30:43',value],['2017/08/20 12:30:43',value]]
series中 设置 smooth:true 可以将折线显示为贝塞尔曲线
[['2017/08/20 12:30:43',value],['2017/08/20 12:30:43',value]] 时间必须补零 不然被echarts转化为NAN
给Echart的容器id设置为myChart2结果不能识别 改成myChartT就可以了
通过myChart.resize()可以重置echarts容器的宽高,直接改变容器的宽高是无效的
xAxis: {
boundaryGap: true, //如果是柱状图 设置为true可以让柱子在坐标轴内
},

时间戳

unix时间戳需要*1000后才能被 var data new Date(data*1000)识别出来
将时间对象转化为时间戳
1new Date().getTime();
2: (new Date()).valueOf();
3: +new Date();

高德地图

当markers和聚合同时使用时,要想清除markers不能直接将markers数组清空就完了,而是要调用地图
的方法,map.remove(markers)
this.$refs.map.$$getInstance().remove(this.markers);
同时需要清空聚合:
if(this.cluster!=null)this.cluster.clearMarkers();

jsx

return (
<span style={data.type==4?this.style2:this.style1} class={this.jsxSpanClass}>
<i class={this.iconArr[data.type]} style="margin-right:10px"></i>
<span class="contextMenu" style="text-indent:-80px" data-park_id={data.park_id} data-id={data.id} data-type={data.type} data-unique={data.unique}>{node.label}</span>
<i class={data.online==0?this.iStyle:data.online==1?this.iStyle:""} style={data.online==0?this.colors[0]:data.online==1?this.colors[1]:this.colors[0]} ></i>
</span>
);
//通过三元表达式为元素设置style需要两个{{}} 如下
<span style={x=='在线'?{color:'#409EFF'}:{color:'#E6A23C'}}>{x}</span>

canvas

某些外部库如jCanvasript的源码是一个自执行的函数如
((x,y)=>{
return x+y
})(x,y)
当引用这个js文件时,我们外部可以使用这个文件的返回值 如果想要多次调用这个自执行的函数使用不同的返回值则可以一下操作
var template = (x,y)=> x+y
export default{
'template ':template
}
外部引用并使用
import test form './jCanvascript'
test.template(); //这里相当于调用了引入的函数
function mouseEvent(e,key,optns) //修改jCanvascript源码 保证当canvas宽高太大时父元素出现滚动条后,滚动条以外的元素的事件绑定失效,这个库的事件绑定是绑定在坐标上的,修改结果如下
{
if(!optns[key].val)return;
e=e||window.event;
var point;
try{
point= {
pageX:e.pageX+document.getElementById('configDiagram').scrollLeft,
pageY:e.pageY+document.getElementById('configDiagram').scrollTop
};
}catch (err){
point= {
pageX:e.pageX,
pageY:e.pageY
};
}
optns[key].event=e;
optns[key].x=point.pageX - optns.x;
optns[key].y=point.pageY - optns.y;
optns.redraw=1;
}
清屏:1:设置画布的宽高(当画布宽高改变时会自动清屏)
2:clearRect(startPointX,startPointY,width,height)
3:fillRect(在需要清屏的地方覆盖一个与背景色相同的正方形)
4:可以通过clearRect清除圆形区域的内容

vue事件

1:我尝试用vm.$off()取消绑定的事件没有成功 解决方案
@mousewheel="flag && mousewheel($event)" @DOMMouseScroll="flag && mousewheel($event)"
通过一个flag来控制事件是可行的,后面是为了兼容fireFox

setTimeout的一些问题

1:forEach循环中需要使用每个i
arr.forEach(()={
Sentence1;
setTimeout(()>{
Sentence2; //这里需要使用i 并且需要使用Sentence1的结果 结果无法实现
},10)
})
2:解决方案
arr.forEach(()={
Sentence1;
fn(i)
})
fn(i){
setTimeout(()=>{
Sentence2;
},10)
}

Math

Math.log(i) / Math.log(1.1) //模拟对数式的增长 底数越小同一指数下会越大单当小于1时,会变成负数

Promise

function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});

Element input事件

@keyup.enter.native //触发键盘的enter事件必须加.native 否则无法触发
@compositionstart.native="compositionstart" //用于触发中文选字开始阶段事件 必须加.native(不用Element可以不用加)
@compositionend.native="compositionend" //用于触发中文选字结束阶段事件 必须加.native

基于vue+Element表格搜索

1:将表格数据拷贝两份
this.copy = Object.assign(this.tableData); //注意,如果tableData中嵌套有对象需要使用递归来拷贝
this.tableData3 = Object.assign(this.tableData);
2:其中一份循环
for(let i=0;i<len;i++){
tempStr="";
//将每一行的数据组合为一个字符串
tempStr+=this.copy[i]["id"]+this.copy[i]["name"]+this.copy[i]["display_name"]
+this.copy[i]["description"];
//通过用户的输入来决定最终数据有哪些行
if(tempStr.indexOf(val)>=0){
this.tableData3.push(this.copy[i]);
}
}
3:使用 compositionstart,compositionend来检测中文输入
4:需要注意window自带输入法在中文输入状态下,如果你输入了一个英文单词并且输入法有提示这个单词,这时你直接敲下enter键将不会触发数据的watch事件(原因未知)(搜狗输入法都是正常的)
5:具体执行判断
compositionstart(){
this.flag=false;
this.flag1 = false;
},
compositionend(){
this.flag=true;
},
if(this.flag || this.flag1) //flag1 是为了当用户输入法为英文时进入这个判断

Vue-Amap

<el-amap-info-window v-for="(window, key) in windows"
:key="key"
:position="window.position"
:visible="window.visible"
:events="window.events"
:vnode="window.vnode">//如果使用vnode 就不能用template
</el-amap-info-window>

字符串模板

[object Object] //data不能是obj,只能是string或者number

Vue模板的问题 (this)

jsx事件问题

<a onClick={this.detailInfoFn}>详情信息</a> //无法使用()传参,因为使用了()会自动执行这个函数
<a onClick={() => this.detailInfoFn(obj.id,obj.type)}>详情信息</a> //解决方案

Vue-Amap中vNode使用问题

vnode:()=>{
return(<div>weidada</div>) //jsx语法 0.4.2以上支持
}
vnode:this.render
render(){
return(<div>weidada</div>) //jsx语法或原生vue语法
}

Vue组件开发时单一事件管理的问题

1:引入
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {App},
data(){
return {
Event: new Vue() //引入Event
}
}
});
2:使用
this.$root.Event.$emit('position', value); //发射
this.$root.Event.$on('position', (value)=>{ //接收
value++;
});
3:清空
this.$root.Event._events.position= [];
需要注意,如果在发射后马上清空那么这个监听只能执行一次,第二次调用时不会有效
优化处理:
let upDateForm = this.$root.Event._events.updateForm;
if(upDateForm)upDateForm.splice(0,upDateForm.length-1);
this.$root.Event.$emit('updateForm');
最优方案:
data(){
return {
Event: new Vue() //在这里面写一些东西,参考
}
}

Vue动画实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
height:500px;
background-color:black;
overflow: hidden;
}
.mybox-leave-active,.mybox-enter-active{
transition: all 1s ease;
}
.mybox-leave-active,.mybox-enter{
height:0px !important;
}
.mybox-leave,.mybox-enter-active{
height: 500px;
}
</style>
</head>
<body>
<div id="box">
<transition name="mybox">
<div class="box" v-show="boxshow"></div>
</transition>
<button @click="togglebox">按钮</button>
</div>
</body>
<script src="../bower_components/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
boxshow:false
},
methods:{
togglebox:function(){
this.boxshow = !this.boxshow;
}
}
});
</script>
</html>

vuex的问题

1:module中用一个数组保存着两个不同组件的状态
unfoldControl:[true,true] //可以有很多个
2:mutation中通过接受的参数来调整数组某一项的状态
[UNFOLDCONTROLSET](state,index) {
state.unfoldControl[index] = !state.unfoldControl[index]; //不能及时触发界面更新,不能使用
},
解决1
var stateTemp = [];
[UNFOLDCONTROLSET](state,index) {
//无效,通过Object.assign拷贝后的数组已经不是纯数组了 [false, true, __ob__: Observer]
stateTemp = Object.assign(state.unfoldControl);
stateTemp[index] = !stateTemp[index];
state.unfoldControl = stateTemp;
},
解决2
var stateTemp = [];
[UNFOLDCONTROLSET](state,index) {
//有效,成为最终解决方案
stateTemp = JSON.parse(JSON.stringify(state.unfoldControl));
stateTemp[index] = !stateTemp[index];
state.unfoldControl = stateTemp;
},
结论:__ob__是Vue自动为data上的对象生成的一个属性,指向Observer构造函数,是Vue的观察者
Observer可以获知一个属性的增删查改状态

浏览器问题

.rightBottom{
height: 435px; //必选加 兼容fireFox
.main {
height: 400px;
flex: 1;
overflow: auto; //父元素不加高度 子元素的高度设置无效,会被内容撑的很高
}
}
解决1:给父元素加上高度,单但动画出问题,translation(chrome,fireFox)都有问题
解决2:动态高度,根据浏览器来设置高度,还是有问题。
最终发现,fireFox出现问题的原因是设置了flex:1,而当我们设置了main的高度后,flex:1已经没用用了,可以
IE Edge浏览器电话号码样式清除(028-12358649)这种格式的
加上一个meta标签 <meta content="telephone=no" name="format-detection">
IE 10多个问题:
1:行内元转化为会计元素需要设置display:block位置才能正确显示(chrome等不需要)
2:不能通过target.dateset.id 来获取data-id设置的自定义属性
需要通过target.getAttribute("data-id")来获取
3:通过jsx中设置样式对于用 "-"链接的属性如margin-left写成marginLeft不能生效
4:url或者ajax get方法中的参数带有中文统一用 encodeURL(url)解决

细节问题

1:右键菜单如果是出现在右下角需要考虑鼠标点击底部的情况=》已解决
2:将echarts 中option 中 y轴的配置里的interval 属性删掉
3encodeURIComponent//将字符串编码,在url中需要调用两次才能生效 decodeURIComponent
4: config.headers['Host'] = 192.168.1.1 //报错,不允许自定义Host头信息
5:不应该使用箭头函数来定义计算属性函数 aDouble: () => this.a * 2) //this问题
6
//去掉console.log
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: false,
drop_debugger: true,
drop_console: true
}
})
7:css容器中的英文和数组不会自动换行(英文会被默认位一个单词,所以不会自动断开换行)
style="word-wrap:break-word"

布局动画问题

1:flex布局,左侧宽度固定,右侧宽度自适应。
2:当左侧宽度需要动态变化(动画收起来leftBar),正常情况右侧能够自适应增加宽度。
3:当右侧容器中有一个元素的宽度固定时(有可能是这个固定的容器中有一个宽度很大的元素,如canvas,需要外层容器固定宽度以产生这个容器的横向滚动条,而不是在body上产生横向滚动条)。
4:当有3的这种情况时必须为leftbar设置min-width,并且这个固定宽度的容器的宽度也要变化,如下
unfoldControl(val,oldVal){ //监测开始动画时
if(val[0]!=oldVal[0]){ //具体哪一个动画
if(this.leftW!=23)this.leftW = 23; //收起时可以不做动画
else{ //展开时必需要做
let leftWTimer = setInterval(()=>{
if(this.leftW>=307){
this.leftW=307; //进入时可能不为307
clearInterval(leftWTimer);
return; //必须return 否则又会加11
}
this.leftW+=11
},20)
}
}
}

vue代码规范

1:v-for和v-if永远不要一起使用
2data中初始化的数据不要太多,删除一些不必要的,特别是一些很大的变量,可以考虑转换为局部变量
3:props规范-> props:{
value:String, //规定其类型
numTem:Number
}
props: {
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
4:就算是不同的组件,也不要有相同的id //class无所谓 class会自动加随机前缀

vue项目优化

1:首屏加载采用服务端渲染的方式
2:路由懒加载
3:webpack-bundle-analyzer //打包分析插件
4productionSourceMap: false,// 是否开启 cssSourceMap 上线时设置为false
5:element dialog中放了多个组件,一次只显示一个,用v-if 否则用v-show其他组件也会执行mounted 事件
6:图片类静态资源最好放到static文件夹下
7:npm outdated //查看项目模块版本
8:登陆如果设置了enter登陆,需要注意用户一直敲击enter键
9:表单验证空格的处理一定要恰当

正则表达式

[^
WdBly|周维 blog copyright-蜀ICP备18002409号-1