A, vue

Vue prevents UI component events from bubbling

// Prevent date events from bubbling: prevent closing the Poptip panel
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="Please select a month" style="width: 130px"></DatePicker>
Copy the code

2. Solve the introduction of vUE project pictures/background pictures

1) small images can be converted into base64: so no path to introduce error: modify the build/webpack base. Conf., js file image processing in the limit value of the loader2) Put the picture directly onstatic/img folder :background-image:url('/static/img/test.png')
3Background-image: url(HTTP: / / background-image: url) static directory: / / background-image: url(HTTP: / / background-image: url) static directory: / / background-image: url/ / 192.168.0.102:1717 / images/b3422d7fb5ba566d1cb9e81efb0e9d7e. JPG);
4) put the background image on another server and reference it directly5Use inline style: write the import path <div in the.vue/.js fileclass="img2" :style="{backgroundImage: 'url(' + img + ')' }"></div>
Copy the code

3. Vue gets the height of the element

// Get the height value
var height= this.$refs.text.offsetHeight; / / 100
// Get the element style value,element = element ref="element"
var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px
// Get the inline style value of the element
var heightStyle =this.$refs.element.style.height; // 100px
Copy the code

4. Iview registers events for the window

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

$set(); $set();

 // Display hidden multiphase child rowstoggleSubTrs(row,rowIndex){ row._tempShowSub = ! row._tempShowSub;this.$set(this.expensesList,rowIndex,row);
}
handleChoose(item){
    this.$set(item, '_isChecked', !item._isChecked);
}
Copy the code

6, iView click blank to hide

import clickoutside from 'iview/src/directives/clickoutside';
Copy the code

Second, presents

Angular opens the Iframe page

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

Angular forbids passing string urls directly to iframe SRC properties until they are securely formatted by a DomSanitizer methodCopy the code

Angular custom pipes: milliliters

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 || The '-';
   }
   return value.toString().replace(/\d+/.function(n) { // First extract the integer part
        return n.replace(/(\d)(? =(\d{3})+$)/g.function($1) {
            return $1 + ', '; }); }); }}Copy the code

3, RXJS to achieve anti-shake

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);
    });
  }
// Enter anti-shake
  debounceChangeAmount( item, total ) {
    this.subjectNum$.next({
      item,
      total
    });
  }

Copy the code