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

前端每日两三问

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

文章目录[隐藏]

  • 1、正则限制输入框最长为两位小数
  • 2、CSS设置页面footer始终在页面底部
  • 3、iview poptip弹窗中渲染表格
  • 4、VUE点击其他地方关闭弹窗
  • 5、如何快速删除子项被选数据?

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


微信扫描下方的二维码阅读本文

赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
简单!三步实现微信消息同步!!
上一篇
我不知道的Event Loop(事件循环)
下一篇
近期文章
  • ant-design-vue a-select 下拉滚动的时候出现数据重复
  • ant-design-vue a-checkbox-group 追加数据后第一个无法选中
  • 5.1游记
  • 将数组中空值字段赋默认值!
  • 周末出游,惊喜相伴——水牛的美丽邂逅。
ant-design-vue a-select 下拉滚动的时候出现数据重复
2023-05-15 14:49:38
91 1 0
ant-design-vue a-checkbox-group 追加数据后第一个无法选中
2023-05-13 15:13:43
149 0 0
将数组中空值字段赋默认值!
2023-04-25 14:49:11
182 0 0
数字跟文字一起被强制换行了?
2023-04-07 17:25:04
254 0 0
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔
Copyright © 2017-2023 卖坚果的怪叔叔

萌ICP备20230818号 苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 工具箱
  • 关于
# WordPress # # CSS #
坚果大叔
243
文章
65
评论
186
喜欢