前端两三问

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