Encyclopedia of common front-end tips (continuously updated)

You need to use some infrequently used tips in your work. Because they are not commonly used, you can't remember them, so record them here.

1. The input numer type removes the boxes for increasing and decreasing suffixes.

input {
&::-webkit-inner-spin-button {
		   -webkit-appearance: none;
		   margin: 0;
	}
	&::-webkit-outer-spin-button {
		   -webkit-appearance: none;
		   margin: 0;
	 }
 }

2. Input detects the input number

<el-input placeholder="请设置隐藏价格" v-model="formData.hidePrice" @input="hidePriceInput"></el-input>
hidePriceInput(){
   this.formData.hidePrice = this.formData.hidePrice + ""
   this.formData.hidePrice = this.formData.hidePrice.replace(/^\.$/g,"")  //清除第一个“.”   
   this.formData.hidePrice = this.formData.hidePrice.replace(/[^\d.]/g,"")  //清除“数字”和“.”以外的字符   
   this.formData.hidePrice = this.formData.hidePrice.replace(/\.{2,}/g,".") //只保留第一个. 清除多余的   
   this.formData.hidePrice = this.formData.hidePrice.replace(".","$#$").replace(/\./g,"").replace("$#$",".")  
   this.formData.hidePrice = this.formData.hidePrice.replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3') //只能输入3个小数   
},

3. Single-line text omission and multi-line text omission

// 单行文本省略
.ellipsis1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
// 多行文本省略
.ellipsis2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}