卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › 前端每日两三问

前端每日两三问

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

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

// 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;
}

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
            }
        })
        ])
    }
}]

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;
}

有两列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(事件循环)
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

热门文章
2023!平平淡淡的一年!
过去的,一点记录!
一些AList站点以及有趣的网址
3.29 天气晴 · 周五。
收藏!!最全的字符串函数方法,看完再也不会忘记了~
梅雨季节来了。
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
431 0 2
什么是 Skill?
2026-08-12 21:32:42
348 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
690 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,683 4 0
1
  • 1
博主

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

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

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
171
评论
432
喜欢