坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 前端每日两三问

前端每日两三问

坚果大叔
2019-12-16 18:44:34技术阅读 1,540

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
赞赏 赞(1)
本文系作者 @坚果大叔 原创发布在 坚果大叔。未经许可,禁止转载。
简单!三步实现微信消息同步!!
上一篇
我不知道的Event Loop(事件循环)
下一篇
在小程序中查看
搜你想看的
聚合文章
AntDesign Table Radio点击死循环导致页面卡死
Python基础教程之条件判断和循环
Mac防撤回插件
将数组中空值字段赋默认值!
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
561 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
5,006 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,335 5 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,037 4
1
  • 1
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢