总结自己最近开发的一个功能期间遇到的问题及解决办法

本文链接：https://blog.csdn.net/weixin_42437043/article/details/105004789

1、遇到按照数据改变长度的图形（背景图会被拉伸或者压缩）
红蓝长条会随着二者的比率海边红蓝长条长度会随着二者的比率改变

最初的想法引用切图作为背景图片，把宽度按照数字变化而改变，但是遇到极端情况，如蓝色只占百分之1，红色占百分之99，图片会因为压缩或拉伸严重变形！
解决办法，放弃红蓝色切图，自己写两个渐变色的div款，宽度进行变化，并在二者之间引用一个下图，根据前者的变化相对定位，实现中间部分的斜角
在这里插入图片描述
中间为串色平行四边形，两边为透明度的图片
具体代码如下

<div class="linePic">
            <div :style="{'width': bluU*100 +'%'}">
              <img src="../assets/img/middle.png">
            </div>
            <p :style="{'width': red*100 +'%'}"></p>
</div>

css样式如下：

.linePic{
  width: 100%;
  height: 0.09rem;
  position: absolute;
  top:0.4rem;
  display: flex;
  justify-content: space-between;
}
.linePic div{
  width: 50%;
  height: 0.09rem;
  background: linear-gradient(to right, #5C9ED4 0%, #CFDFF0 100%);
  border-radius: 0.3rem 0 0 0.3rem;
  position: relative;
}
.linePic img{
  display: block;
  width: 0.1rem;
  height: 0.09rem;
  position: absolute;
  top: 0;
  right: -0.05rem;
}
.linePic p{
  width: 50%;
  height: 0.09rem;
  background: linear-gradient(to right, #F5D8C6 0%, #E9675c 100%);
  border-radius: 0 0.3rem 0.3rem 0;
}

2、后台返回数据为0.57，前端*100之后再展示却为56.99999999···
主要是与与 JavaScript 浮点数相关的 Bug。
解决办法如下：

Math.round(0.57 * 100);

具体原因有个博客解释的很好：链接放上，大家可以学习：https://www.cnblogs.com/login123/p/12100916.html

3、实现一个元素滑动到顶部固定在顶部的效果（顶吸效果）
自己上篇博客已经写过，链接如下：
https://editor.csdn.net/md/?articleId=104909600
4、input输入框限制输入字符用maxlength不生效

以下代码块可实现：

<input type="text"οninput="if(value.length > 200)value = value.slice(0, 200)" >

5、输入框可显示剩余字数的效果
结构代码：

<div class="inputBox">
  <textarea type="text" v-model="inputContent" maxLength=“200”>
  <span>可输入 {{remnant}} 个字</span>
  <p @click="click">发表</p>
 </div>
 JS部分：
 computed: {
	remnant () {
		return this.maxinput - this.inputContent.length
	}
}  // 这里的maxinput，为自己在数据data中设置的总可输入字数