为什么要特别说是textArea的滚动条呢，因为其他标签的滚动条为了更好的兼容性和可塑性，一般可以选择遮住原来的滚动条，自己再做一个滚动条。但是textArea这样做就特别麻烦，而且对原生的一些拖拉放大的操作都不友好，可能都需要放弃导致整个textArea需要自己写。
滚动条说明：
- 兼容性来说其实还是不错的，ie，火狐不太行
-
textArea滚动条分 滚动条，滑道，滑块，上下按钮，横纵结合区域，可拖拽区域
效果
hover 效果
效果
3.效果：滑块与滑道有间隙，滑块有圆角，hover后滑道有色，可拖拽区域没有描边，禁止width拉伸
- border-image 无效
- padding margin 无效
- 滑块的width height 无效， 只有滚动条一个能设置width height
7.思路：滑块用带透明一圈的有圆角效果的背景图，背景图避免拉伸需要分三块，头部，底部，中间可拉伸部分。这里你可以自由扩展，用各种图片组合你想要的样子
8.代码：
/** 样式 */
:root {
--font-color: hsla(0, 0%, 0%, 0.7);
--h: 220;
--s: 100%;
--l: 60%;
--radius: 2px;
}
.my-input {
box-sizing: border-box;
margin: 0;
font-variant: tabular-nums;
list-style: none;
font-feature-settings: "tnum";
position: relative;
display: inline-block;
width: 100%;
min-width: 0;
padding: 4px 11px;
color: var(--font-color);
font-size: 14px;
line-height: 1.5715;
background-color: #fff;
background-image: none;
border: 1px solid hsla(0, 0%, 0%, 0.3);
border-radius: var(--radius);
transition: all .3s;
font-family: inherit;
resize: vertical;
}
.my-input-disabled {
background-color: rgba(0, 0, 0, 0.04);
border: 1px solid hsla(0, 0%, 0%, 0.08);
color: rgba(0, 0, 0, 0.2);
cursor: not-allowed;
}
.my-input:placeholder-shown {
text-overflow: ellipsis;
font-family: inherit;
}
.my-input::placeholder {
color: rgba(0, 0, 0, 0.3);
font-family: inherit;
}
.my-input-undisabled:hover {
border-color: hsl(var(--h), var(--s), var(--l));
}
.my-input:focus,
.my-input-focused {
border-color: hsl(var(--h), var(--s), var(--l));
box-shadow: 0 0 0 2px hsla(var(--h), var(--s), var(--l), 0.16);
outline: 0;
color: rgba(0, 0, 0, 0.9);
}
.my-input-wrapper {
position: relative;
}
.my-input-wrapper:after {
float: right;
color: hsla(0, 0%, 0%, 0.4);
white-space: nowrap;
content: attr(data-count);
position: absolute;
bottom: 6px;
right: 8px;
font-size: 14px;
line-height: 20px;
}
/* 设置滚动条的样式 */
.my-input-wrapper ::-webkit-scrollbar {
width: 16px;
border: 0;
}
/* 滚动槽 */
.my-input-wrapper ::-webkit-scrollbar-track:hover {
background: rgba(0, 0, 0, 0.04);
}
/* 滚动条滑块 */
.my-input-wrapper ::-webkit-scrollbar-thumb {
background-image: url('./1.png'), url('./3.png'), url('./2.png');
background-size: 100% calc(100% - 8px), auto, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center, top center, bottom center;
border-radius: 100px;
}
::-webkit-resizer {
background-image: url('./resizer.png');
}
/**
* name：InputArea
* disabled: 禁止点击
* showCount：且有maxLength的时候显示剩余字数
*/
import React, { FC, useState } from "react";
import './style.css';
type Props = {
onChange?: Function,
disabled?: boolean,
style?: {},
maxLength?: number,
placeholder?: string,
rows?: number,
showCount?: boolean,
value?: string,
}
const InputArea: FC<Props> = (props) => {
const { style, disabled, maxLength, placeholder, rows, showCount, onChange, value } = props;
const [num, changeNum] = useState(0);
return (
<span className={`my-input-wrapper${disabled ? ' my-input-wrapper-disabled' : ''}`} data-count={showCount && maxLength ? `${maxLength - num}` : null}>
<textarea
style={style}
maxLength={maxLength}
disabled={disabled}
className={`my-input${disabled ? ' my-input-disabled' : ' my-input-undisabled'}`}
placeholder={placeholder}
value={value}
onChange={(e) => {
onChange && onChange(e);
changeNum(e.target.value.length);
}}
rows={rows}
></textarea>
</span>
);
};
InputArea.displayName = 'InputArea';
export default InputArea;
