Make a note of any bugs encountered in the headline project

1. Problems caused by resolution in the van-pull-refresh drop-down refresh interface of the Vant component:

(1) The interface 375-667 is displayed properly(2) But in the 768-1024 interface can only display half why: Because the default ‘head-height’ attribute of the plugin is 50px, that is, the height of the drop-down text area is 50px. Due to the REM layout, the display status text on the iPad automatically increases, but the component is still px, so the height is still 50, which causes this problem.

Solution: Manually set the headheight property to a variable that automatically changes the height according to the system resolution. So here’s the code.

==== this is the drop-down refresh component ==== <van-pull-refresh V-model ="isLoading" @refresh="onRefresh" :success-text="refreshSuccessText" Success-duration ="1500" // Add the following attribute :head-height="hh" > ===== Set adaptive height in computed ===== created() {this.hh = (50 * window.innerWidth) / 375; },Copy the code

2. If an error occurs in a bracketed search item when making a search suggestion

2b0e:619 [vue warn]: Error in render: “SyntaxError: Invalid regular expression: /(a ==1 /: Unterminated group”

why: Is because when making search suggestions, the regular expression wraps the keyword with a specific HTML tag and adds it to the structure in order to make the keyword highlighted in the search term. However, when the search term contains symbols that need to be escaped, the regular expression will display these errors.

Solution: Add a new regular expression before searching the suggested regular expression to filter the characters to be escaped, and escape them with replace preceded by ”.

Const hightLightMsg =' <span class='active'>${this.searchText}</span> '; const hightLightMsg =' <span class='active'>${this.searchText}</span> '; / / regular expression need according to different text transition So to use regular expressions of const transReg = / [. * +? | () \ [\] {} \ \] / g; const searchKeyWrods = this.searchText.replace(transReg, "\\$&"); const reg = new RegExp(searchKeyWrods, "gi"); return text.replace(reg, hightLightMsg); },Copy the code