1、正则限制输入框最长为两位小数

1
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;

2、CSS设置页面footer始终在页面底部

1
2
3
4
5
6
// html
<body>
<div id="app">
<div class="footer"></div>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// CSS

body {
position:absolute;
width:100%;
min-height:100%;
}
#app {
padding-bottom: 200px;
height: 100%;
font-family: "Microsoft Yahei", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
min-width: 1190px;
}
footer {
clear: both;
position: absolute;
bottom: 0px;
width: 100%;
background: #000;
color: #fff;
min-width: 1200px;
height: 200px;
}

3、iview poptip弹窗中渲染表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ruleColumns: [{
title: "标题",
key: "key",
minWidth: 150,
align: "left",
render: (h, {row}) => {
return h('Poptip', {
props: {
trigger: "hover",
},
}, [
h('Table', {
slot: 'content',
props: {
columns: this.ruleColumns,
data: this.data
}
})
])
}
}]

4、VUE点击其他地方关闭弹窗

1、原生方法

1
2
// html
<div id="box"></div>
1
2
3
4
5
6
7
8
9
// js
document.addEventListener('click',(e)=>{
  let box = document.getElementById('box');
  if(box.contains(e.target)){
    alert('在内');
  }else{
    alert('在外');
  }
})

2、 Vue写法

1
2
// html
<div id="box" ref="box"></div>
1
2
3
4
5
6
7
8
9
10
// js
created(){
  document.addEventListener('click',(e)=>{
    if(!this.$refs.box.contains(e.target)){
      this.isShowDialog = false;
    }
  })
}
// ref是vue获取DOM元素的方法,在标签上绑定ref属性,
// js在组件内部用 this.$refs.ref的值调用。

3、第三种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
给最外层的div加个点击事件:
@click="userClick=false"

给点击的元素上面加上:
@click.stop="userClick=!userClick"
// click.stop 阻止点击事件继续传播

或者给子元素js事件里加上:

click(e)=>{
  e.stopPropagation(); //阻止事件冒泡
  this.userClick = !this.userClick;
}

5、如何快速删除子项被选数据?

有两列checkbox数据 A、B。B列是通过A列中选择的数据而来。比如选中 a1,a2,a3那么B列的数据就是这三个。如果A列中取消 a2 那么B列的a2也删除。那么现在B列绑定的 model Blist。在选定 a2 后,如果在A列中把a2 取消,那么如果把blist双向绑定获取的 a2 也删除?

如图:

WX201912161331492x.png

思路:

点击A的时候获取当前选中数据的所属子项,然后拿该子项中已选的去和全部比对得出未选的,然后拿未选的去blist进行比对,如果blist中出现未选的则将其删除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let selectList = this.checkAllGroup[index]
let selects = []
selectList.map((item) => {
selects.push(item)
})
let tagsList = this.tags[index].children
let tags = []
tagsList.map((item) => {
tags.push(item.name)
})
let difference = tags.concat(selects).filter(v => tags.includes(v) && !selects.includes(v))
let showTagsArr = this.showTagsArr
let intersection = difference.filter(v => showTagsArr.includes(v))
let end = showTagsArr.concat(intersection).filter(v => showTagsArr.includes(v) && !intersection.includes(v))
this.showTagsArr = end