Enciclopedia de sugerencias comunes de front-end (actualizada continuamente)

Necesita utilizar algunas habilidades poco comunes en su trabajo. Debido a que no se usan comúnmente, no puede recordarlas, así que regístrelas aquí.

1. El tipo de número de entrada elimina las casillas para aumentar o disminuir el sufijo.

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

2. La entrada detecta el número de entrada

<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. Omisión de texto de una sola línea y omisión de texto de varias líneas

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