一，vue

1， vue阻止ui组件事件冒泡

// 阻止日期的事件冒泡：防止关掉Poptip面板
stopPickerPropagation(){
    document.querySelector('.ivu-picker-panel-body').addEventListener('click', function(e){
        e.stopPropagation();
    });
}
 <DatePicker transfer={true} onOn-open-change={this.stopPickerPropagation.bind(this)} onOn-change={this.handleMultiMonth.bind(this,row,rowIndex)} type="month" value={row._month}  placeholder="请选择月份" style="width: 130px"></DatePicker>

2， 解决vue项目图片/背景图片引进问题

1）小图片可转成base64：这样就没路径引进错误了：修改build/webpack.base.conf.js文件里图片处理loader的limit值
2）直接把图片放在static/img文件夹下:background-image:url('/static/img/test.png')
3）静态目录：是在webpack.config.js文件的output的publicPath选项中，主要作用就是处理静态文件路径的： background-image: url(http://192.168.0.102:1717/images/b3422d7fb5ba566d1cb9e81efb0e9d7e.jpg);
4）把背景图片放到其他服务器上，直接引用
5）使用行内样式：在.vue/.js文件中写引进路径<div class="img2" :style="{backgroundImage: 'url(' + img + ')' }"></div>

3， vue获取元素高度

//获取高度值
var height= this.$refs.text.offsetHeight; //100
//获取元素样式值,element 为元素ref="element"
var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px
//获取元素内联样式值
var heightStyle =this.$refs.element.style.height; // 100px

4， iview给window注册事件

import {on} from 'iview/src/utils/dom';
on(window, 'resize', this.setTableBodyHeight);

5， vue改变数组中某个对象属性时触发数据刷新this.$set()

 // 显示隐藏多期子行
toggleSubTrs(row,rowIndex){
    row._tempShowSub = !row._tempShowSub;
    this.$set(this.expensesList,rowIndex,row);
}
handleChoose(item){
    this.$set(item, '_isChecked', !item._isChecked);
}

6，iview点击空白处隐藏

import clickoutside from 'iview/src/directives/clickoutside';

二，angular

1， angular打开iframe页面

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
pageModalSrc: any;
 this.pageModalSrc = this.sanitizer.bypassSecurityTrustResourceUrl(`https://spstatic.banggood.cn//stocksync/?code=${item.productCode}&countryID=${countryId}`);

angular禁止把字符串的url直接传到iframe的src属性里
需要先经过一个类(DomSanitizer)的方法去做安全格式化处理后才允许传入

2，angular自定义管道：千分符

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'thousandthCharacter'})
export class ThousandthCharacterPipe implements PipeTransform {
  transform(value: any, tipText?: string): string {
   if (value == null) {
       return tipText || '--';
   }
   return value.toString().replace(/\d+/, function(n) { // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
            return $1 + ',';
        });
  });
  }
}

3， rxjs实现防抖

import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

private subjectNum$: Subject<any> = new Subject<any>();
ngOnInit() {this.subjectNumInit();}
subjectNumInit() {
    this.subjectNum$
    .pipe(
      debounceTime(600),
      distinctUntilChanged(),
    )
    .subscribe(res => {
      const {item, total} = res;
      this.changeAmount(item, total);
    });
  }
// 输入防抖
  debounceChangeAmount( item, total ) {
    this.subjectNum$.next({
      item,
      total
    });
  }