1.关于取余
我在Dart语言里（flutter项目）
int checkNum = (10 - 29) % 10; 那么checkNum等于1
但是在Vue项目里
const checkNum = (10 - 29) % 10;却等于-9
语言的特性不同，导致结果也不同，如果要想和Dart保持一致，则可以先对sum取余在用10减去后再取余数。
const checkNum = (10 - (sum % 10)) % 10;
2.关于position: sticky;的使用
经常在一个滑动的视图里需要固定某些组件，遇到过好几次用了这个属性没有达到预期的效果，因为可能滑动的视图不是整个屏幕，而是某一个组件，这时候要注意position: sticky;这个属性的组件的层级，不要放在外面，就放在和滚动的视图同一个层级，因为他们的父组件是一样的，sticky才好确定高度。 不然就会发生和视图一起滚动等很傻的UI展示出来。
3.关于文件的上传
一般的post接口请求时，直接一个json对象就传过去了。
export function toAuthReview(data) {
return request({
url: auth_review,
method: 'post',
data: data
})
}
....请求的地方
var payload = { 'certType': 'BANK', 'cuNum': getCustNum() };
toAuthReview(payload).then(response => {}但是在上传图片的时候，就得用formData去上传图片，如果用到formdata，就得单独对接口进行配置headers。
export function feedbackRecord(data) {
return request({
url: feedback_record,
method: 'post',
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
...请求的地方
formData.append('cuNum', 111)
formData.append('mobileNum', 2222)
formData.append('assistanceDesc', 111)
formData.append('assistanceType', 11)
formData.append('assistancePage', '')
formData.append('assistanceChoice', curSelectFeedReson)
formData.append('imgs', list[0]) //图片
formData.append('imgs', list[1])//图片
feedbackRecord(formData).then(response => {});
4.textarea自动聚焦
平常点击textarea就可以聚焦了，但是有时候可能希望点击某个组件的时候，或者当他从可见变成不可见的时候，自动聚焦
1.设置属性: 自动聚焦
<textarea id="myTextarea" autofocus></textarea>
2.当执行某个事件的时候：
function aaa{
const textarea = document.getElementById('myTextarea');
textarea.focus();
}3.关于他的其他一些属性
<textarea
class="bank_number_input"
v-model="bankNum" 与ref数据相互绑定
maxlength="23" 最大长度
rows="1" 最大行数
@input="filterInput"//对输入进行处理
autofocus //聚焦
@keydown="handleKeyDown"//对按键事件进行处理
></textarea>
function filterInput(event) {
const inputValue = event.target.value;//获取当前输入框的值
const separator = ' ';
const positions = [3, 6, 10, 14, 17]; //指定位置插入空格
let filteredValue = inputValue.replace(/\D/g, ''); //只许输入数字
for (let i = 0; i < positions.length; i++) {//插入空格
const position = positions[i];
if (position <= filteredValue.length) {
filteredValue = filteredValue.slice(0, position + i) + separator + filteredValue.slice(position + i);
}
}
event.target.value = filteredValue; //对输入框进行赋值
}因为往输入框插入了空格，所以无法正常删除，于是
function handleKeyDown(event) {
if (event.key === 'Backspace') {
const textarea = event.target;
const caretPosition = textarea.selectionStart;
const inputValue = textarea.value;
if (inputValue[caretPosition - 1] === ' ') {
event.preventDefault(); // 阻止默认的删除行为
textarea.value = inputValue.slice(0, caretPosition - 1) + inputValue.slice(caretPosition);
textarea.selectionStart = caretPosition - 1; // 更新光标位置
textarea.selectionEnd = caretPosition - 1;
}
}
}5.关于三方组件的自定义属性
今天在使用element的el-dialog组件的时候，发现很多属性设置不了，满足不了业务的需求。
后面问了同事，才知道可以用以下方法去解决
1.网页的查看源码
这样就可以看到他里面实际的css样式格式。
2.接下来就是重写他的样式，如果直接写是无法生效的，
需要:deep()才行，例如
3.查看是否生效
刷新后，检查UI，再查看样式是否生效了。
6.关于固定顶部，然后下面的高度也固定但是可以滑动，并且滑动不会滑动整个父组件
第一步：父组件
.all_con {
width: 100%;
height: calc(100vh - 3.5rem);
display: flex;
overflow: hidden;
flex-direction: column;
}确定高度，并且不让滑动
第二步：顶部的组件
.top_sticky_con {
width: 100%;
display: flex;
flex: 0;
flex-direction: column;
opacity: 1;
}设置flex：0；
第三步：
.list_con {
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
}设置他的flex为1，占据剩余高度，并且可以滑动。
实际效果
7.textarea和input的palceHolder样式设置无效
input::-webkit-input-placeholder{
}/*webkit 内核浏览器*/
input::-moz-placeholder{
}/*Mozilla Firefox 19+*/
input:-moz-placeholder{
}/*Mozilla Firefox 4 to 18*/
input:-ms-input-placeholder{
}
/* 设置textarea框提示内容的样式 */
textarea::-webkit-input-placeholder{
text-align: left;
line-height: 20px;
}/*webkit 内核浏览器*/
textarea::-moz-placeholder{
text-align: left;
line-height: 20px;
}/*Mozilla Firefox 19+*/
textarea:-moz-placeholder{
text-align: left;
line-height: 20px;
}/*Mozilla Firefox 4 to 18*/
textarea:-ms-input-placeholder{
text-align: left;
line-height: 20px;}
