fix: 【demo控制台warn问题，autofocus变量没有引用问题、修改count颜色为：inherit、autofocus变量没有引用问题】

Author: cuiaiguanggh

devui/textarea/src/textarea-types.ts

@@ -19,7 +19,7 @@ export const textareaProps = {
  },
  value: {
  type: String,
- default: undefined,
+ default: '',
  },
  maxLength: {
  type: Number,

devui/textarea/src/textarea.scss

@@ -1,10 +1,9 @@
 @import '../../style/core/form';
-@import '../../style/mixins/flex';
 
 .devui-textarea-wrap {
  .devui-textarea-show-count {
  text-align: right;
- color: #00000073;
+ color: inherit;
  white-space: nowrap;
  pointer-events: none;
  font-size: $devui-font-size;

devui/textarea/src/textarea.tsx

@@ -12,10 +12,10 @@ export default defineComponent({
 [props.cssClass]: true,
 }
 
-const curLengthRef = ref<number>(0)
+const curValueRef = ref<string>(props.value)
 const onInput = ($event: Event) => {
 const inputValue = ($event.target as HTMLInputElement).value
-curLengthRef.value = inputValue.length
+curValueRef.value = inputValue
 ctx.emit('update:value', inputValue);
 },
 onFocus = ($event: Event) => {
@@ -32,14 +32,13 @@ export default defineComponent({
 };
 
 return {
-textareaCls, onInput, onFocus, onBlur, onChange, onKeydown, curLengthRef, ...props
+textareaCls, onInput, onFocus, onBlur, onChange, onKeydown, curValueRef, autofocus: props.autofocus
 };
 
 },
 render() {
 const {
 id,
-value,
 placeholder,
 disabled,
 maxLength,
@@ -51,18 +50,17 @@ export default defineComponent({
 onChange,
 onKeydown,
 showCount,
-curLengthRef,
-...attrs
+autofocus,
+curValueRef,
 } = this
 return (
 <div class='devui-textarea-wrap'
 >
 <textarea
-{...attrs}
 {...{ DTextarea: true }}
 id={id}
-value={value}
-autofocus={true}
+value={curValueRef}
+autofocus={autofocus}
 placeholder={placeholder}
 disabled={disabled}
 maxlength={maxLength}
@@ -78,7 +76,7 @@ export default defineComponent({
 {
 showCount && <div
 class='devui-textarea-show-count'>
-{curLengthRef}
+{curValueRef.length}
 {!(maxLength ?? false) ? '' : ' / ' + maxLength}
 </div>
 }

docs/components/textarea/index.md

@@ -16,7 +16,7 @@
 
  <d-textarea
  value="我是默认值"
- autoFocus
+ :autofocus="true"
  id="textArea"
  cssClass="my-text-area"
  ></d-textarea>
@@ -45,23 +45,23 @@
 ```vue
 <template>
  <h4 style="margin: 10px 0">vertical</h4>
- <d-textarea resize="vertical"></d-textarea>
+ <d-textarea placeholder="我可以缩放" resize="vertical"></d-textarea>
 
  <h4 style="margin: 10px 0">horizontal</h4>
 
- <d-textarea resize="horizontal" placeholder="Please Enter"></d-textarea>
+ <d-textarea resize="horizontal" placeholder="请输入"></d-textarea>
 
  <h4 style="margin: 10px 0">both</h4>
 
- <d-textarea resize="both" placeholder="Please Enter"></d-textarea>
+ <d-textarea resize="both" placeholder="请输入"></d-textarea>
 
  <h4 style="margin: 10px 0">none</h4>
 
- <d-textarea resize="none" placeholder="Please Enter"></d-textarea>
+ <d-textarea resize="none" placeholder="请输入"></d-textarea>
 
  <h4 style="margin: 10px 0">inherit</h4>
 
- <d-textarea resize="inherit" placeholder="Please Enter"></d-textarea>
+ <d-textarea resize="inherit" placeholder="请输入"></d-textarea>
 </template>
 ```
 
@@ -74,12 +74,12 @@
 ```vue
 <template>
  <h4 style="margin: 10px 0">默认</h4>
- <d-textarea showCount="true" placeholder="Please Enter"></d-textarea>
+ <d-textarea :showCount="true" placeholder="请输入"></d-textarea>
  <h4 style="margin: 10px 0">显示最大字数</h4>
  <d-textarea
- showCount="true"
- maxLength="20"
- placeholder="Please Enter"
+ :showCount="true"
+ :maxLength="20"
+ placeholder="请输入"
  ></d-textarea>
 </template>
 <style>
@@ -98,8 +98,8 @@
 ```vue
 <template>
  <d-textarea
- showCount="true"
- maxLength="20"
+ :showCount="true"
+ :maxLength="20"
  placeholder="打开控制台输入文字看看"
  @update:value="onUpdate"
  @change="onChange"