一般的なフロントエンドのヒントの百科事典（継続的に更新）

仕事では珍しいスキルを使う必要がありますが、あまり使われていないので覚えられないので、ここに記録してください。

1.入力番号タイプは、サフィックスを増減するためのボックスを削除します。

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

2.入力は入力番号を検出します

<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.1行のテキストの省略と複数行のテキストの省略

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