前端两三问
1、正则限制输入框最长为两位小数
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;2、CSS设置页面footer始终在页面底部
// html
<body>
<div id="app">
<div class="footer"></div>
</div>
</body>// 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弹窗中渲染表格
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、原生方法
// html
<div id="box"></div>// js
document.addEventListener('click',(e)=>{
let box = document.getElementById('box');
if(box.contains(e.target)){
alert('在内');
}else{
alert('在外');
}
})2、 Vue写法
// html
<div id="box" ref="box"></div>// 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、第三种方法
给最外层的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 也删除？
如图：
思路：
点击A的时候获取当前选中数据的所属子项，然后拿该子项中已选的去和全部比对得出未选的，然后拿未选的去blist进行比对，如果blist中出现未选的则将其删除。
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前端每日两三问
整理两到三个日常遇到的问题！！
解决它！！
欢迎小伙伴给出正确的解决方案，你也可以后台给出你平常开发中遇到的问题，分享给大家一起解决！！
我就知道你“在看”
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
