From cb64e803835258a6fad21ea91b8ae8359309eeda Mon Sep 17 00:00:00 2001
From: suzigang <1039168735@qq.com>
Date: Thu, 18 Mar 2021 21:59:07 +0800
Subject: [PATCH] refactor: textarea
---
src/packages/input/doc.md | 2 +-
src/packages/textarea/demo.vue | 23 ++-----
src/packages/textarea/doc.md | 69 ++++++++++++---------
src/packages/textarea/index.scss | 9 +--
src/packages/textarea/index.vue | 101 +++++++++++++++----------------
5 files changed, 98 insertions(+), 106 deletions(-)
diff --git a/src/packages/input/doc.md b/src/packages/input/doc.md
index b7db068d7..35aff33fa 100644
--- a/src/packages/input/doc.md
+++ b/src/packages/input/doc.md
@@ -72,7 +72,7 @@ app.use(Input);
| readonly | 是否只读 | Boolean | `false` |
| max-length | 限制最长输入字符 | String、Number | - |
| disable-clear | 禁止展示清除icon | Boolean | `false` |
-| text-align | 文本位置 | String | `left` |
+| text-align | 文本位置,可选值`left`,`center`,`right` | String | `left` |
### Event
diff --git a/src/packages/textarea/demo.vue b/src/packages/textarea/demo.vue
index 977952af6..e45a1fddf 100644
--- a/src/packages/textarea/demo.vue
+++ b/src/packages/textarea/demo.vue
@@ -4,7 +4,7 @@
+
只读
+
@@ -39,22 +40,10 @@ export default createDemo({
const change = (num: string | number) => {
console.log('change: ', num);
};
- const focus = (num: string | number) => {
- console.log('focus:', num);
- };
- const blur = (num: string | number) => {
- console.log('blur:', num);
- };
- const clear = (num: string | number) => {
- console.log('clear:', num);
- };
return {
state,
- change,
- blur,
- clear,
- focus
+ change
};
}
});
diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md
index fb672911b..ff20d5fb9 100644
--- a/src/packages/textarea/doc.md
+++ b/src/packages/textarea/doc.md
@@ -1,16 +1,17 @@
-# Input 输入框组件
+# Textarea 文本域组件
### 介绍
+支持多行文本
### 安装
``` javascript
import { createApp } from 'vue';
-import { input } from '@nutui/nutui';
+import { Textarea } from '@nutui/nutui';
const app = createApp();
-app.use(input);
+app.use(Textarea);
```
## 代码演示
@@ -20,13 +21,13 @@ app.use(input);
```html
+ v-model:value="state.val0"
+ @change="change"
+ rows="5"
+ placeholder="高度可拉伸"
+ :autosize="true"
+ label="留言:"
+/>
```
### 显示字数统计
@@ -34,31 +35,41 @@ app.use(input);
```html
+ v-model:value="state.val1"
+ @change="change"
+ rows="5"
+ :limit-show="true"
+ max-length="20"
+ type="textarea"
+ placeholder="设置输入五行"
+ label="留言:"
+/>
```
+### Prop
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
-| value | 输入值,双向绑定 | String | - |
-| placeholder | 为空时占位符 | String | - |
-| label | 左侧文案 | string | - |
-| maxlength | 限制最长输入字符 | string/number | - |
-| rows | textarea时高度 | string/number | 2 |
-| limit-show | textarea时是否展示输入字符。须设置maxlength | boolean | `false` |
-| change | 输入内容时触发 | function | - |
-| focus | 聚焦时触发 | function | - |
-| blur | 失焦时触发 | function | - |
-| clear | 点击清空时触发 | function | - |
+| value | 输入值,支持双向绑定 | String | - |
+| placeholder | 为空时占位符 | String | `'请输入信息'` |
+| label | 左侧文案 | String | - |
+| max-length | 限制最长输入字符 | String、Number | - |
+| rows | textarea的高度 | String、Number | `2` |
+| limit-show | textarea是否展示输入字符。须配合`max-length`使用 | Boolean | `false` |
+| autosize | 高度是否可拉伸 | Boolean | `false` |
+| text-align | 文本位置,可选值`left`,`center`,`right` | String | `left` |
+| readonly | 只读属性 | Boolean | `false` |
+| disabled | 禁用属性 | Boolean | `false` |
+
+
+### Event
+
+| 名称 | 说明 | 回调参数 |
+|-------|----------|-------------|
+| change | 输入内容时触发 | val |
+| focus | 聚焦时触发 | val |
+| blur | 失焦时触发 | val |
diff --git a/src/packages/textarea/index.scss b/src/packages/textarea/index.scss
index ffb8955ac..d16f65817 100644
--- a/src/packages/textarea/index.scss
+++ b/src/packages/textarea/index.scss
@@ -3,14 +3,9 @@
width: 100%;
padding: 10px 0px 10px 25px;
display: flex;
- background: rgba(255, 255, 255, 1);
- border-bottom: 1px solid rgba(234, 240, 251, 1);
+ background: $white;
+ border-bottom: 1px solid $input-border-bottom;
font-size: 14px;
- input {
- width: 230px;
- flex: 1;
- padding: 0 10px;
- }
.nut-input-label {
width: 80px;
overflow: hidden;
diff --git a/src/packages/textarea/index.vue b/src/packages/textarea/index.vue
index 8b74ba9e0..8d3db58e0 100644
--- a/src/packages/textarea/index.vue
+++ b/src/packages/textarea/index.vue
@@ -1,24 +1,26 @@
-
+
- {{ props.label }}
+ {{ label }}
- {{
- state.textNum
+ {{
+ textNum
}}
/{{ maxLength }}
@@ -26,12 +28,12 @@